v2.0.0

[andreruffert]

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

---

This discussion was created from the release v2.0.0.