v2 Release Candidate

[andreruffert]

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

New features

• HTML form support
• Vertical orientation support
• Multi thumb support

New documentation site

• https://andreruffert.github.io/range-slider-element/

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

✌️