Slim Range Slider Control In Vanilla JavaScript – LjSlider

Preview:

Description:

LjSlider is a native JavaScript library to create custom mobile-compatible range slider controls without any dependency.

More features:

• Custom step size
• Supports multiple slider handles.
• Sets/gets range values.

How to use it:

Import the LjSlider’s files into the html document.

<link rel="stylesheet" href="dist/css/lj-slider.min.css">
<script src="dist/js/lj-slider.js"></script>

Create a placeholder element in which you want to place the range slider.

<div class="mySlider"></div>

Initialize the library to generate a default range slider.

var mySlider = new LjSlider({
    elt: document.querySelector('.mySlider')
});

Set the initial value(s) using the data-val attribute. Separate multiple values with the comma.

<div class="mySlider" data-val="1, 10, 100, 2000"></div>

Use the dark theme instead. Just add the CSS class to the placeholder element in case you use a light background.

<div class="mySlider onlight"></div>

All possible options to customize the range slider.

var mySlider = new LjSlider({
    // Makes the steps have the same length
    sameStep: true,
    // Starting value
    start: 0,
    // The number of handles
    pins: 1,
    // A function which will be fired on change
    handler: console.log,
    // Uses green background
    link: true,
    // An array of steps
    steps: [{ step: 1, number: 10 }],
    // Initial values.
    values: []
    
});

Set & get the range value.

mySlider.setValue(value(s));
mySlider.getValue();

Reload the range slider.

mySlider.change();