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 SlimSliderDirective for iOS and Android native API modifications

We still have a directive to create for that slim-slider attribute we had on Slider:

<Slider #slider slim-slider minValue="0" [maxValue]="duration" 

class="slider"></Slider>

We are going to create platform-specific directives, since we will tap into the slider's actual native API on iOS and Android to disable user interaction and hide the thumb for a seamless appearance.

For iOS, create app/modules/player/directives/slider.directive.ios.ts with the following:

import { Directive, ElementRef } from '@angular/core';@Directive({ selector: '[slim-

slider]'})export class SlimSliderDirective {  constructor(private el: ElementRef) { }   

ngOnInit() { let uiSlider = <UISlider>this.el.nativeElement.ios; ...

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