Slider step

4 posts, 0 answers
  1. Lukas
    Lukas avatar
    4 posts
    Member since:
    Jun 2020

    Posted 25 Jun 2020 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 25 Jun 2020 Link to this post

    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.
  3. Lukas
    Lukas avatar
    4 posts
    Member since:
    Jun 2020

    Posted 25 Jun 2020 in reply to Stefan Link to this post

    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);
      };
  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 25 Jun 2020 Link to this post

    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.
Back to Top