[Slider] Thumb is lagging behind

[thany]

Steps to reproduce

Steps:

1. Drag the Slider component around fast enough

Current behavior

The knob lags behind the mouse cursor. In slow-motion it's clearly visible, but I think it's also noticable at normal speed, especially in person.

Expected behavior

No lag, or try reducing the lag.

Context

No response

Your environment

I tested it just here: https://mui.com/material-ui/react-slider/
So whatever the environment is there, I guess. It says MUI 6.3.0 at the top, so that's probably what it is.

I'm using Firefox.

Search keywords: slider lag/lagging

[aarongarciah]

Hey @thany, thanks for reporting. I'm only able to reproduce when applying a 20x CPU slowdown using browser devtools. Are you able to reproduce the issue in other browsers like Chrome? Do you have the devtools open when reproducing the issue?

[thany]

I can't test in Chrome right now (on my personal pc that doesn't have it) but I do remember I didn't have the devtools open.

The 20x CPU slowdown does, however, prove the issue exists. It may seem silly, but your CPU might be tremendously fast. The next mum's tablet SoC might not be though 🤐

[mj12albert]

I kind of know of this issue, one thing that could help a bit is that the position of the thumb (as it is being dragged) is currently set using CSS left/bottom/right where the value (%) is derived from the slider value after it has already been rounded/clamped: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Slider/useSlider.ts#L697-L698

It may be a bit smoother if those %s were unrounded. (Trying this in Base UI here mui/base-ui#1219)

That said, I think this lag is impossible to eliminate completely? Even a native MacOS slider could lag a little bit (recording is slowed down 5x):

output.mp4