Lightweight Accessible Range Slider Component – aria-progress-range-slider

A tiny and easy JavaScript library to create responsive, accessible, customizable, touch-friendly range slider & progress bar components on the web application.

The library dynamically adds WAI-ARIA roles and attributes to the range sliders to make them fully accessible for keyboard users and screen readers.

How to use it:

1. Install & download the package.

# NPM
$ npm install aria-progress-range-slider --save

2. Import the aria-progress-range-slider.

import ProgressBar from 'aria-progress-range-slider';
import 'aria-progress-range-slider/dist/style.css';

<!-- OR -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css" rel="stylesheet">
<script type="module">
  import ProgressBar from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/aria-progress-range-slider.mjs';
</script>

3. Create a placeholder for the range slider.

<div id="example"></div>

4. Create a default range slider on the app.

const mySlider = new ProgressBar('#example', {
      // options here
});

5. Config the range slider with the following options.

const mySlider = new ProgressBar('#example', {
      ariaLabel: 'Seek slider',
      arrowMoveStep: 1,
      pageMoveStep: 5,
      className: 'AriaProgressBar',
      disabled: false,
      float: false, // use floating numbers instead of integers
      getTooltipText: (value:number, options:IProgressBarOptions) => {
        if (options.float) {
          return value.toString();
        }
        return Math.round(value).toString();
      },
      getValueText: (value:number, options:IProgressBarOptions) => {
        return `${ value } ranging from ${ options.min } to ${ options.max }`
      },
      initialValue: 0,
      max: 100,
      min: 0,
      snap: true,
      step: 1,
});

6. Event handlers.

const mySlider = new ProgressBar('#example', {
      onChange: (value, options) => {},
      onDragEnd: (value, options) => {},
      onDragMove: (value: number, options?: IProgressBarOptions) => {},
      onDragStart: (value: number, options?: IProgressBarOptions) => {},
});

7. API methods.

// Gets the current value
mySlider.getValue();
// Sets value
mySlider.setValue(value);
// Sets value for the buffer bar
mySlider.setBufferValue(value);
// Enables the range slider
mySlider.enable();
// Disables the range slider
mySlider.disable();
// Destroys the range slider
mySlider.destroy();