A cross browser customizable and accessible <range-slider> web component
npm install range-slider-element> A cross browser customizable and accessible <range-slider> web component.
* Framework agnostic web component (no dependencies)
* Cross browser customizable styling
* Single and multi thumb
* Horizontal and vertical orientations
* Works like a built-in HTML form element (uses ElementInternals)
* Keyboard accessible (use arrow keys)
* Touch friendly
* Follows the ARIA best practices guide on sliders
Install via npm
``shell`
npm install range-slider-element
Import as ES module
`js`
import 'range-slider-element';
Or via CDN
`html`
`html`
Make sure to load the base styles exported via range-slider-element/style.css.
Or via CDN
`html`
* 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
* [][dir] Directionality. The default is ltr. Allowed options rtl.orientation
* The default is horizontal. Allowed options vertical.
[dir]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
CSS custom properties
Exposed CSS custom properties scoped within the range-slider element.
* --track-size - The track size. The default is 0.2rem. Can be overwritten for customization.--thumb-size
* - The thumb size. The default is 1.2rem. Can be overwritten for customization.
DOM selectors
`css
range-slider {}
range-slider [data-track] {}
range-slider [data-track-fill] {}
range-slider [data-thumb] {}
/ Advanced customization /
range-slider [data-runnable-track] {}
`
For examples of how to customize the default styling, check out the [docs][docs].
[docs]: https://andreruffert.github.io/range-slider-element
* input - Pointer move, value changed. Bubbles.change` - Pointer up, key up, value changed. Bubbles.
*
For examples checkout the CodePen <range-slider> collection.
Distributed under the MIT license. See LICENSE for details.