Decimal value for Slider step does not work

[pabueco]

When you use a decimal value for the step property you don't get decimal values. The value of the slider is always an integer.

<Slider v-model="value1" :step="0.1" />

I also tried using decimal values for the min and max props, but that does not make a difference.

<Slider v-model="value1" :step="0.1" :min="0.5" :max="10.0" />

I tried it with both Vue versions (2.x and 3.x).

Example: https://codesandbox.io/s/xenodochial-butterfly-puv1i?file=/src/components/SliderDemo.vue

[adlaws]

I'm affected by this issue too (currently using PrimeVue 2.4).

From an inspection of the source it looks like the issue is cause by modelValue = Math.floor(newValue); in the updateModel() method of the Slider.vue component definition; this occurs on both lines 113 and 122, depending on whether a range is set or not.

https://github.com/primefaces/primevue/blob/master/src/components/slider/Slider.vue

It seems that these lines are rounding the value down to the nearest integer, and so fractional step values are essentially having no effect until the threshold of the next integer is reached.

In my quick and dirty testing, simply changing these lines to modelValue[this.handleIndex] = newValue; and modelValue = newValue; respectively fixes the problem, and allows fractional values to be used for the step parameter.

As I say, this is a quick and dirty test, so I'm not sure what side effects this "fix" might cause, but so far I haven't seen any.

The only workaround for this (i.e., without applying the above suggested fix) that I can come up with for now is to create the slider with a large enough range that the value can be scaled back to create the illusion of a fractional step.

So, for example, instead of

<Slider v-model="value1" :step="0.1" :min="0.5" :max="10.0" />

...do this...

<Slider v-model="scaledValue" :min="5" :max="100" />

and then have a computed which does this...

value1() { 
    return this.scaledValue / 10.0;
}

...and use this "shadowed" value1 for whatever.

It works but is definitely a bit "yuck". It should be able to be achieved with the step parameter, like a normal HTML input component with the range and step attributes:

<input type="range" min="0.5" max="10.0" step="0.1">

[kayahasa]

I have also faced with this issue. Step doesnt work (0.1, 0.01 etc)

[tugcekucukoglu]

Sorry for the late answer. Thanks for the great feedback.
For now, I'd prefer to round at most 2 decimal places.
https://github.com/primefaces/primevue/blob/master/src/components/slider/Slider.vue#L142

Still you might need to compute your own value for the more smaller decimals. If something goes wrong again, please let me know.

[tugcekucukoglu]

There should be no need to calculate the slider value one again. So I revert it.
@mertsincan thanks for the great solution. 3276963

[adlaws]

Great news! Thanks to @mertsincan for the work on this fix.