<range-slider> element

A customizable range slider element. Forked from https://github.com/andreruffert/range-slider-element and enhanced to support vertical alignment.

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

• No dependencies
• Customizable styling
• Touchscreen friendly
• Keyboard accessible

Install

$ npm install range-slider-vertical-element

Usage

import 'range-slider-vertical-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.
• vertical The value. The default is false.
• 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