[Bug]: Slider's thumb extends past the edges of the control

[behowell]

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A

Are you reporting Accessibility issue?

no

Reproduction

https://react.fluentui.dev/?path=/docs/preview-components-field-sliderfield--default

Bug Description

Actual Behavior

The thumb of Slider extends beyond the bounds of its root, which causes it to appear misaligned with a label or other form controls:

Expected Behavior

The slider should be aligned with the edge of its root. Perhaps the track needs to be padded in, so the thumb doesn't extend past the end when it is at 0?

Note: This bug is logged based on a comment in a Field VR test PR: #25263 (comment)

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[behowell]

cc @micahgodbolt

[micahgodbolt]

you kicked the hornet's nest here :) This was a thorn in my side while creating the control. Without using additional wrapping elements I was not able to figure out a way to avoid this, while also allowing the thumb to travel so that it was centered over the rail edge.

Typical sliders stop when the edge of the thumb touches the edge of the rail.

Our slider slides until the center of the thumb is over the edge

The kicker is....you need to make sure that the real and fake thumbs are actually aligned. It's easy to make this happen visually, but you end up with thumbs slightly unaligned near the edges of the slider.

Is it possible to work around this and make a special case for slider? Or do we need to revisit this again?

[behowell]

It is technically possible to special-case this for SliderField, but I imagine it would also be a problem for other places that use Slider, if it renders outside the bounds of the root element.

The simplest way to solve this visually would be to add a left/right margin to the root element, to give space for the thumb to extend past the end of the track. That's probably how it would be special-cased for SliderField if needed. But that does feel a little like adding a hack on a hack, since the thumb would still be rendered outside the borders of the root element.

Another option is to add padding to the root element, which would pad in the track and the rest of the contents. That requires refactoring the slider's styles a little to account for it. I was prototyping this option and it seems to work pretty well, so I published a draft PR with the fix. The main drawback is that it results in a DOM structure change (or else the styles get unnecessarily complex to account for the padding).

• fix: Pad in slider so the thumb does not render outside the bounds of the root element #25378