<range-slider> web component

A cross browser customizable and accessible range slider element

v2 Release Candidate npm version npm downloads GitHub

npm install range-slider-element Copy
<range-slider></range-slider>

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.

Installation & Usage

Install

Install via npm

npm install syntax-highlight-element Copy

Usage

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

import 'range-slider-element'; Copy

Or via CDN

<link rel="stylesheet" href="https://unpkg.com/range-slider-element@latest/dist/range-slider-element.css"> <script src="https://unpkg.com/range-slider-element@latest/dist/range-slider-element.js"></script> Copy

HTML

<range-slider min="0" max="100" step="1" value="50"></range-slider> 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 updated. Bubbles.
  • change - Pointer up, key up, value updated. Bubbles.