<range-slider> element
A cross browser customizable and accessible <range-slider> web component.
Features
Install
Install via npm
npm install range-slider-element
Usage
JavaScript
Import as ES module
import 'range-slider-element';
Or via CDN
<script type="module" src="https://cdn.jsdelivr.net/npm/range-slider-element@2/+esm"></script>
HTML
<range-slider min="0" max="100" step="1" value="50"></range-slider>
CSS
Make sure to load the base styles exported via range-slider-element/style.css.
Or via CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/range-slider-element@2/dist/range-slider-element.css">
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. Allowed options rtl.orientation The default is horizontal. Allowed options vertical.
Styling
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
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.
Events
input - Pointer move, value changed. Bubbles.change - Pointer up, key up, value changed. Bubbles.
Examples
For examples checkout the CodePen <range-slider> collection.
License
Distributed under the MIT license. See LICENSE for details.
© André Ruffert
