This is a migrated thread and some comments may be shown as answers.

Slider step

3 Answers 21 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lukas
Top achievements
Rank 1
Lukas asked on 25 Jun 2020, 06:39 AM

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

Sort by
0
Stefan
Telerik team
answered on 25 Jun 2020, 07:23 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Lukas
Top achievements
Rank 1
answered on 25 Jun 2020, 10:46 AM

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);
  };
0
Stefan
Telerik team
answered on 25 Jun 2020, 12:33 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Lukas
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Lukas
Top achievements
Rank 1
Share this question
or