Range slider
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.