[slider] Allow Slider.Indicator to be dragged

[Leong-Qi-Jin]

Summary

Allow the Slider.Indicator component to be dragged when there are two thumbs. Not sure how this would work for other number of thumbs.

Examples in other libraries

Here is a good example from Syncfusion Flutter widgets:

Motivation

Having this built-in would improve user experience significantly. If this is already possible without significant configuration, I would love to see an example in the docs.

[oliviertassinari]

This is equivalent to mui/material-ui#17228.

[Leong-Qi-Jin]

In case someone is trying to implement this with the current primitives, here is a rough summary of what needs to be done:

On pointer down:

• store initial pointer position (clientX or clientY)
• store initial range ([low, high])
• capture pointer so drag continues outside indicator bounds
• register pointermove + pointerup/pointercancel listeners

On pointer move:

• compute pixel delta from initial pointer position
• convert pixels to slider value units:
  • deltaValue = (deltaPx / sizePx) * (max - min)
• add delta to both ends
• clamp to [min, max]
• snap both values to step
• emit if range changed

On pointer end/cancel:

• release pointer capture
• remove window listeners

[colmtuite]

This breaks critical functionality. You should be able to click anywhere on the track to set the nearest thumb to that value.

[oliviertassinari]

There is some prior work on this here https://mui.com/x/react-charts/zoom-and-pan/#composition

We fixed a number of issues with it https://github.com/mui/mui-x/issues?q=is%3Aissue%20zoom%20slider%20label%3A%22scope%3A%20charts%22 but the UX is still quite broken, e.g. keyboard support doesn't work.

---

click anywhere on the track to set the nearest thumb to that value

@colmtuite In this case, some move the whole range, like in https://www.highcharts.com/demo/stock/drag-on-axis

Screen.Recording.2026-05-15.at.18.07.29.mov

Others restart the range selection, like in https://visx.airbnb.tech/brush

Screen.Recording.2026-05-15.at.18.56.59.mov

[colmtuite]

@oliviertassinari I should have specified clicking inside the range. The expected behaviour is that the closest thumb jumps to where you clicked.

Screen.Recording.2026-05-17.at.02.57.51.mov

[Leong-Qi-Jin]

I should have specified clicking inside the range. The expected behaviour is that the closest thumb jumps to where you clicked.

There seems to be quite a number of valid behaviours. Would it be a good idea to provide multiple options to users via props, or it's better for this to be implemented at user-land?