Open penx opened 6 months ago
@benoitgrelard check this out
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!
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:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role