How to get NativeScript's slider to use step values?

user_11272198 0
Viewed 541

I am using NativeScript's slider component in my app. I need the slider to only do integer values. 

<Slider 
    width="275"
    minValue="{{ minValue }}" 
    maxValue="{{ maxValue }}" 
    [ngModel]="value" 
    (ngModelChange)='onValueChanged($event)'>
</Slider>

How can I get it to do integer steps only for both iOS and for Android?

nativescript angular
2 Answers

Seems to be an open Issue at NativeScript.

As workaround you can try to round the value if value changed in your onValueChanged:

Template:

 <Slider #sl (valueChange)="onValueChanged(sl.value)"></Slider>

Component:

public onValueChanged(value) {
   ...
   this.value = Math.round(value);
   ...
}
user_100360390

Rounding the number doesn't give me a step of 10 (i.e) so I wrote it like so:

onValueChanged(value) {
   let step = 10;
   this.value = Math.ceil(value / step ) * step;
}

html

<Slider #sl minValue="10" maxValue="240" (valueChange)="onValueChanged(sl.value)"></Slider>
user_2819650
Related