Accessible and Responsive slider

Demo

Initial setup

Paste below HTML structure at your code where you want Slider to appear. Any ID or classname is fine. Call the slider component from Wrapper library and Slider

    
    
        <div id="sliderID" class='slider-class'></div>

Call the slider component from Wrapper library at initial Load event. It can be $(document).ready(...) or Window.onload or Window.eventListener('load', ...). Then slider will load with default settings.

Configuration

All sort of customization need to be passed as an Object. Slider settings can be customized by altering few attributes like

Key name	Type	Value
id	String	It's a required attribute and necessary to follow accessibility guideline. This should be unique and
min	Integer. No fraction allowed	Determine minimum value to start with. Default is O
max	Integer. No fraction allowed	Determine the maximum value Slider will hold. Default is 100
now	Integer. No fraction allowed	Set initial value in Slider. Default is 0
stepper	Integer. No fraction allowed	Set the jump count of Slider. This is necessary for PAGE UP and PAGE DOWN keys. For an example - If stepped is set to 10 then pressing PAGE UP will increment slider value by 10. Default is 10
label	String	Label stating purpose of Slider. This is a required key. Passing empty string will display default string from Library which is 'Slider'
output	String	Pass the reference (ID or Class) of a container where result would display when slider moves
onSliderChange	Function	This is a callback function and triggers whenever Slider moves. It always returns Slider value after movement.
css	Object	It's an optional key and holds color settings for Slider. Any valid color code format is supported. All the keys inside the object are optional too. thumbColor - Set color to circular thumb. Default is #0fa683 borderColor - Set border color outer to slider rail. Default is #d7d0d0 fillColor - Set filled color in slider rail to visually show how much it moved to right. Default is #5abfa8 backgroundColor - Set background color to rail. It visually shows empty rail and how much left to be filled. Default is #f3f0f0

    
    
    var sliderOption = {
        min: 0,
        max: 255,
        now: 50,
        stepper: 10,
        css:{
            thumbColor: '#6e6d6d',
            borderColor: '#d7d0d0',
            fillColor: '#a4a1a1',
            backgroundColor: '#f3f0f0'
        },
        label: 'Demo slider',
        output: '#sliderVal',
        onSliderChange: function (data) {
            console.log('Selected Item: ', data);
        }
    };

    window.addEventListener('load', function () {
        window.A11yWrapper('.slider-class').slider(sliderOption);
    });

How to use Slider component multiple times

Slider can be positioned in multiple places while initiating the library. Also, multiple slider can have different configurations as well. Below two ways, Slider can be called several times.

Using multiple ID.

Call wrapper class multiple times for each distinctive ID.

    
    
    var sliderOption1 = {...},
    sliderOption2 = {...},

    window.addEventListener('load', function () {
        window.A11yWrapper('#id_1').slider(sliderOption1);
        window.A11yWrapper('#id_2').slider(sliderOption2);
    });

Using same class for multiple elements.
In below example, configuration object will be assigned sequentially. First object will be assigned to first Slider and second object will be assigned to second Slider. If only one configuration object is passed then both Slider will be built upon that single configuration object.
```
    
    
    var sliderOption1 = {...},
        sliderOption2 = {...},

    window.addEventListener('load', function () {
        window.A11yWrapper('.slider-class').slider(sliderOption1, sliderOption2);
    });
    
    
    
```

Accessibility

Keyboard interaction

HOME/ END - HOME key press move Slider to initial position. END key press move slider to max position
PAGE UP/ DOWN - PAGE UP or PAGE DOWN key press jump slider by the position. It can be either 10 or 15 etc.
RIGHT/ LEFT/ UP/ DOWN - RIGHT and UP arrow key increase Slider value. LEFT and DOWN key decrease slider value.