The Slider has integer values on Android and decimal ones on iOS

[DimitarTachev]

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

I'm running the Pro UI Angular Examples and tracking the appVolume property used here. The problem is that when I try to slide to 2/3 of the slider, I'm getting 66 on Android and 66.19718170166016 on iOS. As a result, I need to use Math.floor(result) in order to get the same behavior on both platforms.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: 3.4.0
• CLI: 3.4.1
• Cross-platform modules: 3.4.0
• Runtime(s): 3.4.0

[neil-119]

Any workaround for this?

[cristiansandru11]

+1

[zerocewl]

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);
   ...
}

Confirmed as working by Stackoverflow Issue

[csimpi]

@zerocewl 's workaround doesn't work for me. First, it changes the value to the rounded one, then it changes back to the selected original value:

    <Slider [value]="filters.age" minValue="0" maxValue="100"
            (valueChange)="onAgeChanged($event)">
    </Slider>

  onAgeChanged(event){
    this.filters.age = Math.ceil(event.value/10)*10;
    console.log('onAgeChanged',event.value,'=>',this.filters.age);
  }

console.log messages as I'm sliding through, the event.value is always the slider's value not the rounded.

onAgeChanged 1 => 10
onAgeChanged 10 => 10
onAgeChanged 2 => 10
onAgeChanged 3 => 10

[lano-vargas]

None of the above quite work for me, as there was a little glitch when you just tap on the circle it would change from 190 to 190.37890 as you click again it would then go back or forward to 191 but a combination of round + fixed did the job, I've only tested up to 1000:

public onValueChanged(value) {
    console.log('value changed');
    this.sliderPrice = Math.round(value).toFixed(0);
}

Adding toFixed work better for me!