slider
slider copied to clipboard
draggableTrack does not respect step prop
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.
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 :)