A customizable range slider element.
Accessible range slider custom element with keyboard support.
Follows the ARIA best practices guide on sliders.
$ npm install range-slider-element
import 'range-slider-element';
<range-slider min="0" max="100" step="1"></range-slider>
min
The minimum permitted value. The default is 0.max
The maximum permitted value. The default is 100.step
The stepping interval. The default is 1.value
The value. The default is min + (max - min) / 2
.dir
Directionality. The default is ltr.Exposed CSS custom properties scoped within the range-slider
element.
--value-percent
- The current value in percentage, e.g. 50%range-slider {}
range-slider .thumb-wrapper {}
range-slider .thumb {}
input
- Pointer move, value updated. Bubbles.change
- Pointer up, value updated. Bubbles.Browsers without native custom element support require a polyfill.
MIT © André Ruffert