-
Notifications
You must be signed in to change notification settings - Fork 148
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support a clickable label for Slider #379
Comments
@benoitgrelard check this out |
changing the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: