Incorrect thumb value provided to component and also value breaks on thumb moving

zillow / react-slider

Accessible, CSS agnostic, slider component for React.

https://zillow.github.io/react-slider

MIT License

890 stars 232 forks source link

Closed gabrielmicko closed 2 years ago

gabrielmicko commented 2 years ago

<ReactSlider
    min={0.11}
    max={77.77}
    value={v}
    onChange={v => setV(v)}
 />

When I move the thumb left the max value breaks.

Please provide a CodeSandbox that clearly reproduces the issue. Issues without a CodeSandbox are less likely to get resolved quickly.

gabrielmicko commented 2 years ago

I am not sure yet, but I think when I provide prop step={0.01} it works.

kris-ellery commented 2 years ago

@gabrielmicko please use step={0.01} and update onChange handler to use spread operator for setting a value.

<ReactSlider
  step={0.01}
  onChange={(v) => setV([...v])}
  // ...
/>

I applied these changes to your CodeSandbox example and everything worked/updated as expected.