What's Changed
Features
- Multi thumb support
- Vertical orientation support
- HTML form support
Breaking changes
-
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 {}
Bug fixes
- Fix disabled state
- Fix rtl direction track fill
Full Changelog: v1.1.0...v2.0.0