range slider return 3 values , including one negative array index | Mantine | Page 1

hard arrow · 2025-01-10T22:39:52.074Z

https://codesandbox.io/p/sandbox/mantine-react-template-forked-t74rgl It happens when dragging and releasing fast I think. the fix is basically `const fixedValue: RangeSliderValue = [sliderValue[0], sliderValue[1]];` Also when you define steps and marks, or precision set to 0, maybe would be appropriate to skip calling onChange for every pixel that dragged? like restrictToMarks perhaps, which isn't implemented with range slider. That's why all the value checks to avoid useless updates. Also I'm not sure whether "inverted" is useful, but a split range slider would be. Other than creating group of 2 controlled sliders that limit each other's range. Another suggestion in terms of intuitive ux is locking the range slider when dragging in middle as is, changing both min and max values and maintaining the range, instead of snapping closest edge to the cursor.

Another thing, I don't know if that's intended, but when the slider is in disabled state, clicking on it invokes onChangeEnd.
While it's useful if you want it to behave like a checkbox, but the problem is that it runs the callback with a value from it's own internal state, which may not be what I want it to be after clicking on it.
Maybe i want to enable it and set a different value.
I can't use onClick because then dragging won't work.
Sure i could probably do some wrapper that holds the previous disabled boolean ref, and block the callback when disabled state changes, and set new value from props instead.

`
const TimeRangeSlider = ({ onChange, value, defaultValue, ...props }: TimeRangeSlider) => {
const previousValue = useRef(value || defaultValue);
const disabledRef = useRef(!previousValue.current);

useEffect(() => {
disabledRef.current = props.disabled || false;
}, [props.disabled]);

const handleChangeEnd = (time_window: [number, number]) => {
if (value && time_window[0] === value[0] && time_window[1] === value[1]) {
return;
}

if (disabledRef.current && defaultValue) {
  previousValue.current = defaultValue;
  onChange(defaultValue, true);
  return;
}

const valueFix: VisitTimeWindow = [time_window[0], time_window[1]];
previousValue.current = valueFix;
onChange(valueFix, true);

};
`

well, maybe its my own niche case. Typically the slider should remember the last state before disable, freeze changes, and call onChange with last value when enabled, that makes more sense for typical use.
It is mostly my own condition where I want multiple sliders, 1 slider per day, and 1 slider as default for reference.
So when sliders for specific day enabled, it uses the default set by other slider, not that last internal state. So i made a wrapper that intercept the default behavior.

#range slider return 3 values , including one negative array index