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
});
Install Parcel using Yarn or npm:
Yarn:
yarn global add parcel-bundler
npm:
npm install -g parcel-bundler
git clone https://github.com/rajasegar/wc-aria-slider
npm install
npm start
or
parcel index.html