Awesome

<range-slider> element

A customizable range slider element.

Accessible range slider custom element with keyboard support.
Follows the ARIA best practices guide on sliders.

No dependencies
Customizable styling
Touchscreen friendly
Keyboard accessible

<div align="center"> <br> <br> <img src="https://user-images.githubusercontent.com/464300/66577218-443e1400-eb79-11e9-9e66-a8b62bbc97ba.png" alt="range slider element preview example" width="300"> <br> <br> </div>

Install

$ npm install range-slider-element

Usage

import 'range-slider-element';

<range-slider min="0" max="100" step="1"></range-slider>

Attributes

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.

Styling

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 {}

Events

input - Pointer move, value updated. Bubbles.
change - Pointer up, value updated. Bubbles.

Browser support

Browsers without native custom element support require a polyfill.

License

MIT © André Ruffert