<range-slider>

A cross browser customizable and accessible range slider web component

npm install range-slider-element

Copy

Playground

<range-slider aria-label="Choose a value"></range-slider>

Copy the HTML

Try editing the CSS

Copy the CSS

Features

The <input type="range"> HTML element can be used to create basic sliders, but it is difficult to style across browsers. The <range-slider> custom element helps achieve accessible sliders that can be styled as needed.

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

Installation & Usage

Install

Install via npm

npm install range-slider-element

Copy

Usage

JavaScript

Import as ES module

import 'range-slider-element';

Copy

Or via CDN

Copy

HTML

<range-slider min="0" max="100" step="1" value="50"></range-slider>

Copy

CSS

Make sure to load the base styles exported via range-slider-element/style.css.

Or via CDN

Copy

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 50 (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] {}

Events

input - Pointer move, value changed. Bubbles.
change - Pointer up, key up, value changed. Bubbles.

Changelog

This project uses SemVer for release versioning and maximum backward compatibility. Full changelog.

Examples

For more examples checkout the CodePen <range-slider> collection.