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

Changelog

2.0.0 (2025-03-02)

Features

• Multi thumb support
• Vertical orientation support
• HTML form support

Breaking changes

• CSS custom properties scoped under the range-slider element

  - --value-percent 
  - --element-height
  - --track-height
  
  /* The track size based on the orientation */
  + --track-size
  

  With v2 the value percent is automatically applied to the track fill and thumbs.

• DOM selectors

  Track/-fill

  - range-slider::before {}
  
  + range-slider [data-track] {}
  + range-slider [data-track-fill] {}
  

  - range-slider .thumb-wrapper {}
  
  /* Advanced customization */
  + range-slider [data-runnable-track]
  

  Thumb

  - range-slider .thumb {}
  
  + range-slider [data-thumb] {}
  

  Focus state

  - range-slider:focus .thumb {}
  
  + range-slider [data-thumb]:focus {}
  

  Instead of the element itself, the thumb is focusable.

  Active state

  - range-slider.touch-active .thumb-wrapper .thumb {}
  
  + range-slider thumb:active {}
  

Bug fixes

• Fix disabled state
• Fix rtl direction track fill