Slider step

[Lukas]

Hello 

I was wondering how the step props on the Slider works. In the attached example the current value on the onChange event has multiple decimals, as shown in the console. I was expecting natural numbers by the 10 (0, 10, 20 ... 100). Do I understand the meaning of the step props wrong? If so, how do I get distinct values from the slider?

https://stackblitz.com/edit/react-ygjp8x

[Stefan]

Hello, Lukas,

The step props is used for the Slider buttons to move the Slider with a predefined value when the user clicks the decrease or the increase button:

https://www.telerik.com/kendo-react-ui/components/inputs/api/SliderProps/#toc-buttons

As for the distinct values, we can get (or set) them using Math.round with the value. This is because we give the number with max precision as it is easier to round it when do not needed, compared to finding the precision value out of the rounded one.

https://stackblitz.com/edit/react-ygjp8x-rq2lab?file=app%2Fmain.jsx

Please let me know if you need additional information on this matter. 

 

Regards,
Stefan
Progress Telerik

[Lukas]

Thanks for the quick reply. I wasn't aware that the step property of the kendo slider serves a different purpose then the native html one.

I mimicked the functionality with this onChange handler

const updateValue = (event: SliderChangeEvent) => {
    const newValue: number = Math.floor(event.value / props.step) * props.step;
    props.onChange(newValue);
  };

[Stefan]

Hello, Lukas,

Thank you for sharing the approach with the KendoReact community it is highly appreciated.

If you have any additional questions regarding this functionally, I will be happy to assist.

Regards,
Stefan
Progress Telerik