Repository navigation
[slider] Thumb is lagging behind #44851
Description
Steps to reproduce
Steps:
- 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
Activity
aarongarciah commentedon Dec 24, 2024
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?
[-]Slider knob is lagging behind[/-][+][Slider] Thumb is lagging behind[/+]thany commentedon Dec 31, 2024
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 commentedon Jan 6, 2025
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/rightwhere 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-L698It 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
jgaik commentedon Apr 30, 2025
Do i understand correctly that it should be wokred on - aka fix the rounding problem similarly to mui/base-ui change?
[-][Slider] Thumb is lagging behind[/-][+][slider] Thumb is lagging behind[/+]gauravxshukla commentedon Aug 17, 2025
Hey!
I want to take up this issue.
I feel I know the underlying issue and how to fix it.
[Slider] Fix thumb lagging issue on low-end devices by improving drag…
UmaMishra commentedon Aug 27, 2025
Hi, I’d like to work on this issue.
shivenaggarwal commentedon Oct 16, 2026
I'd like to pick this up. I looked into why the default slider still lags after the earlier attempts: the drag updates come from native pointermove/touchmove listeners, and React renders those after the browser has painted the frame, so the thumb is one frame behind on every slider, not only stepped ones. Flushing those updates synchronously removes that frame without changing values, rounding, or the click animation. I'll open a PR with tests and measurements shortly.
github-actions commentedon Oct 23, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@thany Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.