Custom Accessible Range Slider Input – Air Slider

A range slider is one of the most-used types of interactive elements but, unfortunately, making a good one is not an easy task.

That’s why I present you with a JavaScript library called Air Slider which converts the normal input field into a customizable accessible range slider, which allows users to select a range of values within a minimum and maximum value.

How to use it:

1. Download and import the Air Slider.

import "./src/aSlider.sass";
import {AS} from './aSlider.js';

2. Create a text input field on the page.

<input type="text" id="mySlider" />

3. Initialize the Air Slider.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
});

4. Set the min/max values.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
      values: {min: 1, max: 100},
});

5. Set the step size.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
      step: 10,
      keyStep: 10,
});

6. Set the start values.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
      start: [10, 90],
});

7. Determine whether to disable the range slider on page load. Default: false.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
      disabled:	true,
});

8. Trigger a function when the values changes.

const mySlider = new AS({
      target: document.getElementById('mySlider'),
      onChange: function(values) {
        // ...
      }
});

// OR
mySlider.onChange((values) => { 
  // ...
});

9. Enable/disable the range slider.

// disable
mySlider.disabled(true);
// enable
mySlider.disabled(false);

10. Get the current values.

mySlider.getValue();

11. Destroy the range slider.

mySlider.destroy();