range-slider-element
Advanced tools
Changelog
2.0.0 (2025-03-02)
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 {}