search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.97k stars 732 forks source link

[Slider] Active Attribute on Slider thumb #2036

Open PixeledCode opened 1 year ago

PixeledCode commented 1 year ago

Feature request

Overview

The': active' selector does not work on the Slider component since it's not built using the input element. Is it possible to add some class or data attribute indicating that the thumb is currently pressed?

Examples in other libraries

https://polaris.shopify.com/components/selection-and-input/range-slider On clicking the thumb in Polaris' Slider, we can use the :active selector to add styling.

Who does this impact? Who is this for?

Anyone who would want more control over the component's styling in this particular state.

Additional context

I tried using onMouseDown and onMouseDown but they are not working since dragging is enabled on this element.

WINOFFRG commented 1 year ago

image

Best to go with manually adding event handlers, onPointerDown instead of onMouseDown