[Slider] Ends are unreachable with mouse drags

[SimeonRolev]

Bug report

Current behavior

Drag a Slider to one of its ends. Value is properly set to 0 or 100, but the Slider.Thumb doesn't get positioned at the very start/end of the Slider.Track (its inset-inline-start CSS property is set to 0.4242% or 99.4242%, for example). A proper positioning is only achievable with a quick drag. It's more obvious with wider sliders or multiple sliders one under the other.

Screencast.from.27.01.2025.19.06.21.webm

Expected behavior

The positioning of the thumb should reflect the value passed to the onValueChange(value, event) - a value of 0 / 100 positions the Slider.Thumb at inset-inline-start: 0% / 100%; without the need of a quick mouse drag.

Reproducible example

https://base-ui.com/react/components/slider

Base UI version

^1.0.0-alpha.5

Which browser are you using?

Chrome

[mj12albert]

Thanks for reporting this @SimeonRolev

This would be caused by #1219, I think we need to round the position values when the pointer is released

[SimeonRolev]

@mj12albert That's what I initially thought of as a workaround and I gave it a shot yesterday, utilizing the onValueCommitted callback. As the min/max values of the Slider might not be 0 to 100, I parsed the value of the thumbNode.style.insetInlineStart css property instead to determine whether we are close to an edge and re-adjust the Slider.Thumb only in that case to avoid re-adjusting on every mouse up. This approximation can be improved for example by using the min, max and step values properly, instead of just comparing <1 || >99, but you get the point.

Unfortunately, I don't think it's optimal. A user sets a slider's value during a mouse drag and seeing the slider re-adjust on its own upon mouse release is awkward - even if it happens only at the edges. Makes you not trust the component - did it only glitch visually or did it slightly tweak my value, too?

const MySlider = (props) => {
    const ref = useRef(null);

    const onValueCommitted = (value, event) => {
        handleEdges();
        return props.onValueCommitted?.(value, event);
    };

    const handleEdges = () => {
        if (props.orientation === 'vertical') return;

        const thumbNode = ref.current.querySelector('.thumb');
        if (!thumbNode) return;

        const cssValue = thumbNode.style.insetInlineStart;
        if (cssValue.endsWith('%')) {
            const value = Number(cssValue.substring(0, cssValue.length - 1)); // remove % sign
            if (value < 1) thumbNode.style.insetInlineStart = '0%';
            if (value > 99) thumbNode.style.insetInlineStart = '100%';
        }
    };

    return (
        <div ref={ref}>
            <Slider.Root
                {...props}
                onValueCommitted={onValueCommitted}
            >
                <Slider.Control>
                    <Slider.Track>
                        <Slider.Thumb className='thumb' />
                    </Slider.Track>
                </Slider.Control>
            </Slider.Root>
        </div>
    );
};

[SimeonRolev]

One more example of the UI not respecting the steps of the slider properly:
<Slider onValueChange={v => console.log('Value', v)} min={0} max={10} step={2} />

Screencast.from.28.01.2025.11.38.09.webm

[oliviertassinari]

Is this a regression from https://mui.com/base-ui/react-slider/? Are we missing a test case from MUI Base?

[mj12albert]

Is this a regression from https://mui.com/base-ui/react-slider/? Are we missing a test case from MUI Base?

It was caused by #1219 which changed the thumb styles to be based on the pointer position instead of being always derived from the value in MUI Base (which is always rounded/clamped) 🙇

[mj12albert]

@SimeonRolev If you would like to test the fix locally in the mean time:

npm install https://pkg.csb.dev/mui/base-ui/commit/6599a23d/@base-ui-components/react