Slim Range Slider Control In Vanilla JavaScript – LjSlider

Category: Form , Javascript | June 5, 2019
Author: idjitjohn
Views Total: 116
Official Page: Go to website
Last Update: June 5, 2019
License: MIT

Preview:

Slim Range Slider Control In Vanilla JavaScript – LjSlider

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();

You Might Be Interested In:


Leave a Reply