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
3 Answers, 1 is accepted
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
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); };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
Our thoughts here at Progress are with those affected by the outbreak.