Support a clickable label for Slider

[penx]

I would like to add a label element for a slider component. Clicking the label should focus the slider.

At the moment I cannot find a way to do this with Radix Themes directly.

I can do this with Radix Primitives by making the Slider.Thumb a input[type="range"] using the asChild prop.

As Radix Themes does not expose the Thumb part, in order to do this with Radix Themes I would need to build my own Slider using the Radix Themes classes and Radix Primitives parts.

This is fine - but perhaps this technique is useful for others or perhaps you want to incorporate this in to Radix Themes. I am not sure if there is a drawback to making the Thumb part an input[type=range], I haven't found one yet, but if there is not perhaps this should be done as standard?

Check out this stackblitz - it shows the issue and how I have solved it:

https://stackblitz.com/edit/vitejs-vite-5ikew3

Note that the Thumb already has role="slider" and, as far as I can see, input[type=range] is a sensible default when using role=slider:

When not using the HTML element to create your slider
...
It is recommended to use a native of type range, , rather than the slider role.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role

[vladmoroz]

@benoitgrelard check this out

[jjenzz]

changing the Slider.Thumb to a button by default wld also fix this. the slider supports multiple thumbs so unstyled ranges might look a bit weird here. they would allow Radix to remove some internal BubbleInput logic though which could be nice!