<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 ismin + (max - min) / 2
. -
vertical
The value. The default isfalse
. -
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