You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
The text was updated successfully, but these errors were encountered: