Range slider

Range sliders are used for inputting numeric values within a range.
  • Examples
  • Properties
  • Accessibility

Examples

To render a range slider, apply the class chi-range-slider to an input type="range". Range widths are fluid by default.

Achieve consistent rendering

As webkit browsers don't support an active track bar, we've created our own. You will either need a JavaScript solution for moving the chi-input__thumb element and changing the size of chi-input__progress, or you can use Chi's JavaScript library as it provides this functionality out of the box.

Preventing memory leaks

Rangeslider component has a dispose function to free all the resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

It is safe to call the rangeSlider method more than once, as it will return any previously created rangeSlider component associated with the element.

Accessibility

Accessibility guidelines coming soon