v2.0.0 #138

andreruffert · 2025-03-05T01:43:25Z

andreruffert
Mar 5, 2025
Maintainer

CSS custom properties scoped under the range-slider element
```
- --value-percent 
- --element-height
- --track-height

/* The track size based on the orientation */
+ --track-size
```
With v2 the value percent is automatically applied to the track fill and thumbs.

DOM selectors

Track/-fill

- range-slider::before {}

+ range-slider [data-track] {}
+ range-slider [data-track-fill] {}

- range-slider .thumb-wrapper {}

/* Advanced customization */
+ range-slider [data-runnable-track]

Thumb

- range-slider .thumb {}

+ range-slider [data-thumb] {}

Focus state

- range-slider:focus .thumb {}

+ range-slider [data-thumb]:focus {}

Instead of the element itself, the thumb is focusable.

Active state

- range-slider.touch-active .thumb-wrapper .thumb {}

+ range-slider thumb:active {}

Full Changelog: v1.1.0...v2.0.0

This discussion was created from the release v2.0.0.