[Slider] Position thumb based on value instead of pointer location when dragging

[DarthSim]

Hey there 👋

Problem

I noticed a problem with Slider.Thumb positioning while dragging it. When the thumb is dragged with the mouse, percentageValues is calculated based on the cursor position. However, the thumb position changes only when the value changes. This leads to situations where the thumb is placed in the cursor position at the moment of the value change instead of the correct value position. When the mouse button is released, the thumb jumps to the correct position.

Problem demo: https://codesandbox.io/p/sandbox/awesome-torvalds-2l3n65

Screen.Recording.2025-04-19.at.20.36.50.mov

Solution

The solution is to calculate percentageValues based on the value instead of the cursor position.

Fix demo: https://codesandbox.io/p/sandbox/awesome-torvalds-fix-xglgjw

• I have followed (at least) the PR section of the contributing guide.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	934a9e8
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/6807a15e2b74480008eacb6f
😎 Deploy Preview	https://deploy-preview-1750--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mj12albert]

When the thumb is dragged with the mouse, percentageValues is calculated based on the cursor position

Hey @DarthSim this is actually the intended behavior - when dragging and the pointer is between steps, the Thumb could be positioned either based on the pointer or the closest step, and we found having it follow the pointer makes drags a bit smoother, especially with touch devices

However, the thumb position changes only when the value changes.

I do see the issue you're describing though, it's more noticeable when the range is small (0-100) as compared to the docs (0-100)

[DarthSim]

we found having it follow the pointer makes drags a bit smoother, especially with touch devices

I do understand your intentions, but I beg you to reconsider 😅

When the step is small and barely noticeable, the Thumb following the cursor indeed feels smooth. But when the step is large, it simply doesn't feel right; it feels like you're not in control of the Thumb.

Here I simulated smooth Thumb dragging: https://codesandbox.io/p/sandbox/awesome-torvalds-smooth-sj9hcd. Unfortunately, the Thumb jumping to the right position when you release the mouse button still feels more like a bug than a feature to me.

[atomiks]

I think the fix feels a lot better and less buggy, if it's not as good on touch then it would at least be better for mouse pointers. cc @colmtuite

[colmtuite]

I agree with @atomiks, the fix demo provided by @DarthSim feels significantly better.

Here I simulated smooth Thumb dragging: https://codesandbox.io/p/sandbox/awesome-torvalds-smooth-sj9hcd. Unfortunately, the Thumb jumping to the right position when you release the mouse button still feels more like a bug than a feature to me.

I also agree with this, definitely feels buggy.

cc @mj12albert

[mj12albert]

Actually found a bug here - when the range (max-min) is small with a small amount of steps this is returning when should actually update the % values only and not the value

But we can change this anyway if snap-to-step while dragging is better than snapping when the pointer is released

[mj12albert]

(BTW I've updated the tests)

[mj12albert]

67e61ad

The % values can be derived and don't have to be a separate state then