A Web Component for Slider based on WAI-ARIA authoring practices
Last updated 2 years ago by rajasegar .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install wc-aria-slider 
SYNC missed versions from official npm registry.

ARIA Slider

A Web Component for Slider element based on WAI-ARIA authoring practices.



Try to use UP, DOWN, RIGHT, LEFT ARROW KEYS, and also HOME, END, PAGE UP and PAGE DOWN keys for navigating the slider value. Once the slider is focused you can either use mouse of keyboard for navigation.

Also test with a screen reader for ARIA compatibility if needed.


Include the aria-slider.js file in your application.

<aria-slider min="0" max="100" value="50"></aria-slider>

For update callbacks, pass on the event name to emit in case of update like below:

<aria-slider min="0" max="100" value="50" on-update="update-red"></aria-slider>

Now listen for the corresponding events in your application:

document.addEventListener('update-red', (event) => {
  let value = JSON.parse(event.detail).value;

  // Do something with the value


Prerequisites for running demo in local server

Install Parcel using Yarn or npm:


yarn global add parcel-bundler


npm install -g parcel-bundler


git clone https://github.com/rajasegar/wc-aria-slider

npm install

Development server

npm start or parcel index.html


Current Tags

  • 1.0.1                                ...           latest (2 years ago)

1 Versions

  • 1.0.1                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 3
Dev Dependencies (1)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |