range slider element

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

65
5
JavaScript

<range-slider> element

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

Test status
npm version
gzip size
npm downloads

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/+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/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