[slider] Thumb alignment for inset slider designs

[raclee7]

Feature request

Is it possible to have the "handle/thumb" align with the track when it is at it's min & max?
Right now the handle is going beyond the bounds of the component, it will likely not feel as aligned once used.
I noticed the native html slider does this:
https://www.w3schools.com/howto/howto_js_rangeslider.asp

Native html slider

My use case below where thumb goes beyond the bound

[mj12albert]

Vlad proposed a position: "inset" | "centered" prop for the Thumb in #981

@colmtuite I'd actually argue that inset thumb has to be the default

the thumb position usually doesn't visually communicate the value accurately

Slider isn't a component for entering precise values anyway, so this doesn't seem like the most important constraint here. Sometimes it's important, sure—I'm well aware of radix-ui/primitives#1966, but precise mapping is more of an edge case for slider in my opinion. It's fine as long as it's going to be an option.

Otherwise, we can't ignore a class of slider designs, like this one:

Centered thumb wouldn't work in UIs like this one too because it would yield a layout collision:

iOS sliders are the same. Because of potential layout collisions and misalignments, I'd almost never want to use a centered thumb—I wouldn't use a slider when a precise value matters anyway.

the pointer becomes misaligned

This has always seemed just like an implementation mistake in Radix. Don't see why it should be misaligned—if thumb has, say, 100px of travel, that should be covered by 100px of pointer travel.

Native range input sliders (which are inset by default) and macOS sliders don't have this issue:

https://jsfiddle.net/1j9x06yu/

One more point to consider is that with Radix, it's possible to implement a centered thumb yourself via a 0px thumb element and pseudo elements for the visual thumb, but the reverse doesn't work—you can't implement an inset thumb with the design that we have.

Altogether, I think we need something like position: "inset" | "centered" on the Thumb, with inset being the default because it slots into any design layout well and can work with two most common slider design styles—a thin track with a larger thumb, and a thick track and same size thumb.

[mj12albert]

Was able to make a somewhat decent inset slider using the current API: https://deploy-preview-1609--base-ui.netlify.app/experiments/slider/inset

• put Control inside Track (opposite of the documented anatomy)
• use semi-circular pseudo-elements to extend the Control's hitbox
• to put a border around the whole thing, use box-shadow and add semi-circular pseudo-elements to the Track for the shadow to wrap around (there is a 1px overlap I haven't solved yet though fixed with clip-path: inset(…))

I haven't thoroughly tested if the pseudo-elements on control would cause any bugs or inaccuracies in the values yet

CC @vladmoroz

[raclee7]

@mj12albert The functionality works great - is there a way we could keep the original design (with the circle thumb bigger than the track bar) with the inset slider?

[mj12albert]

is there a way we could keep the original design (with the circle thumb bigger than the track bar

Yep the sizes can be changed accordingly, I added another example @raclee7

[mj12albert]

After #1661 it may be possible to round the poles of the Control and Track using border-radius alone (instead of using pseudo-elements) since pointer events outside the border-radius curve do not run

[mj12albert]

85b1e67

The Control/Track do not have to be reversed anymore, and only one pseudo-element is needed to extend the Indicator towards the "min" end