Range-slider-element NPM

<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.