Skip to content

andreruffert/range-slider-element

Repository files navigation

<range-slider> element

A customizable range slider element.

CI status npm version npm downloads

Accessible range slider custom element with keyboard support.
Follows the ARIA best practices guide on sliders.

  • No dependencies
  • Customizable styling
  • Touchscreen friendly
  • Keyboard accessible


range slider element preview example

Install

$ npm install range-slider-element

Usage

import 'range-slider-element';
<range-slider min="0" max="100" step="1"></range-slider>

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.

Styling

Exposed CSS custom properties scoped within the range-slider element.

  • --value-percent - The current value in percentage, e.g. 50%
range-slider {}
range-slider .thumb-wrapper {}
range-slider .thumb {}

Events

  • input - Pointer move, value updated. Bubbles.
  • change - Pointer up, value updated. Bubbles.

Browser support

Browsers without native custom element support require a polyfill.

License

MIT © André Ruffert