[Slider] Add 'thumbAlignment' option to align thumb center with slider edges

[mark-gl]

Description

Added a thumbAlignment prop that provides a choice between containing thumb sliders within the track or allowing them to centre on the edges of the track. This replicates the behaviour of the Ark/Zag.js slider prop with the same name.

By default, Radix's slider thumb position interpolates to ensure it stays within the track. The centred alignment option might be more convenient in some use cases, since the mouse will always be at the centre of the thumb when dragging. MUI and Base Web use this approach as well.

The two options can be visualised by the images from #1966:

thumbAlignment: "contain" (default)

thumbAlignment: "center"

[ADTC]

Is it possible for you to add a third option to do this?

thumbAlignment: "compensate"

I think the contain option should be fixed to do this, but if the library maintainers are saying the wrong version is "by design" then let us at least have the correct version "by option" 🙂

Maybe call it compensate. (Referring to the option compensating for the thumb width. See my comment in the issue.)

PS: If you think about this, it's really just the same as center with extra visual padding on the track that's half the width of the thumb. So it looks like it's in-bound but behaves like it's out-bound. With the center option, I can at least add some CSS to the track to achieve the desired effect (looking inbound while being outbound). But it doesn't look like it would be possible in contain because the mouse behavior itself is broken and no amount of CSS on the track can fix it.

To clarify, we start first with the center option which contains the real track from min to max:

Then we just have to add two fake tracks to the two sides of the real track. The fake ones would each be half the width of the thumb. This would give the compensate version.

[dgriffith2023]

Nice work!🚀