O'Reilly logo

NativeScript for Angular Mobile Development by Nathanael J. Anderson, Nathan Walker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a custom ShuttleSliderComponent

We can't have a multitrack studio experience without the ability to shuttle back and forth through our mix! Let's double down on Slider and enhance its capabilities by combining the best of all the options NativeScript and Angular provide us. In the process, our player controls will start to become much more useful.

Starting at the high level, open app/modules/player/components/player-controls/player-controls.component.html and replace it with the following:

<StackLayout row="1" col="0" class="controls">  <shuttle-slider [currentTime]

="currentTime"     [duration]="duration"></shuttle-slider>  <Button 

[text]="playStatus" (tap)="togglePlay()"    class="btn btn-primary w-100"></Button></StackLayout>

We are replacing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required