Slider - Submitted Form Value is not correct

[petewins]

Describe the bug Upon form submit, the form action's value of the Slider is not correct.

To Reproduce

1. Create a Slider with step={.01} inside <form action={onAction}> element
2. Drag slider and submit the form
3. TheformAction value returned from the form's action is not correct. The value does the match the Slider's value.

   <form
   action={(formData) => {
     console.log(Array.from(formData.entries()));
     // output: ['reshaped-slider', '50'], 
    //  expected output: ['reshaped-slider', '50.25']
   }} 
   >
   <Slider name="reshaped-slider" defaultValue={50.25} step={0.01} />
   <Button type="submit">Submit</Button>
   </form>

CodeSandBox https://codesandbox.io/p/devbox/reshaped-slider-decimal-vwtxvc?file=%2Fapp%2Fpage.tsx%3A11%2C26

Expected behavior Expect the value of Slider to match the sliders value (does not work for uncontrolled as well). On submit of native HTML slider it shows the decimal values

Proposed solution

I believe the fix is to pass the step attribute to the native input element. Currently the value is correct in the DOM element but is missing the step attribute so the browser is rounding to the default step.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step

Environment (please complete the following information):

• Chrome LTS
• Mac

Additional Context: In addition, when step={0.01} and User is dragging the slider, value can sometimes show a long number

[blvdmitry]

Finally got to this issue, thanks for reporting. I don't think applying step to the input will solve the problem in this case (even though it's a good improvement) since it's more about the issues of how Javascript handles float numbers. In case you're looking for an immediate fix (I understand that a week has passed 😅), you can also work with values multiplied by 100 and divide them back when submitting the form or on the back-end side. That's also why you would see libraries like stripe-js always working with integers instead of floats, so their representation of 1usd is a value of 100.

I will try to fix it internally meanwhile by detecting the precision passed in the step and handling the step calculations in a different way

[petewins]

Thanks for looking into this and providing alternative, I agree with you on the javascript and its quirks with float. Though I'd prefer using using ints, I'd also expect it to behave somewhat similar to the native input range element so in this case, i'd expect 30.00 to be 30

[blvdmitry]

Writing tests and releasing a patch early this week :)

https://github.com/formaat-design/reshaped/assets/887379/567d0243-a3bb-4409-8ed6-b0c6909fe086

[blvdmitry]

You can try it out in 2.10.8 🚀

[petewins]

Thank you @blvdmitry, confirmed is working as expected in 2.10.8 🔥