🐛 Slider handle overflows or gets cut off

[robkri]

The slider's handle overflows its parent by about 11 pixels and thus might get cut off when it's at the minimum or maximum position:

Additional information:
In Material this is aparently prevented by indenting the entire slider on both sides to leave enough room for the handle.

The slider shown in WinUI gallery prevents overflowing by not allowing the handle to move as far: The handle stops as soon as its outer ring touches the end of the slider bar:

The latter has the advantage of a cleaner layout: The slider bar uses the entire width that the Slider widget needs and thus aligns neatly with other form elements.

Expected behaviour:
The slider handle (knob) does not overflow its parent. And ideally reproduces the behaviour seen in WinUI gallery.

[bdlukaa]

We use material's Slider under the hood of Slider. We use a "hack" to remove the indentation on the slider sides (which is added by default on the material Slider), trying to mimic the native slider behavior.

To fix this issue, the offset of the knob would need to be evaluated to proper align the thumb:
https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/inputs/slider.dart#L429-L554

A workaround is to add a padding (6px horizontally) onto the Slider.

[robkri]

Yes, this is how I'm doing it currently. Although I need 11.0 pixels padding.