v2 Release Candidate #132

andreruffert · 2025-02-20T20:41:49Z

andreruffert
Feb 20, 2025
Maintainer

Happy to announce v2 is currently under review as release candidate.

You can install it using the @next tag.

npm i range-slider-element@next

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 {}

✌️