github.com/andreruffert/range-slider-element

<range-slider> element

A cross browser customizable and accessible <range-slider> web component.

Features

• 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

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://unpkg.com/range-slider-element@latest/dist/range-slider-element.js"></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://unpkg.com/range-slider-element@latest/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.

Browser support

Browsers without native custom element support require a polyfill.

License

Distributed under the MIT license. See LICENSE for details.

© André Ruffert