slider icon indicating copy to clipboard operation
slider copied to clipboard

draggableTrack does not respect step prop

Open rmccue opened this issue 4 years ago • 1 comments

draggableTrack, added in #722, doesn't respect the step prop, instead allowing users to drag the track to any value.

For example (see also this Codepen):

<Range
  allowCross={ false }
  draggableTrack
  max={100}
  min={0}
  step={5}
/>

This will only allow dragging the endpoints to multiples of 5, but the track can be dragged to other values; i.e. set to 0-10, then drag the track to 2-12.

rmccue avatar Dec 31 '20 17:12 rmccue

A little workaround that I came up with is to round the numbers you get in the onChange function. In your case you can do something like this:

const onValueChange = values => {
    // round to the nearest 5 (because step is 5)
    const minValue = Math.round(values[0] / 5) * 5);
    const maxValue = Math.round(values[1] / 5) * 5);

    setVal([minValue, maxValue]);
};

And yes, a PR would be better :)

xulww avatar Dec 13 '21 09:12 xulww