Slim Range Slider Control In Vanilla JavaScript – LjSlider

Category: Form , Javascript | June 5, 2019
Views Total:625 views
Official Page:Go to website
Last Update:June 5, 2019


Slim Range Slider Control In Vanilla JavaScript – LjSlider


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.


Reload the range slider.


You Might Be Interested In:

Leave a Reply