Sliders

The Lazy Kit sliders are based on the NoUiSlider library. In order to use them, you need to specifically import the nouislider.js in your file.

To create a basic slider you need a <div> with an id that you can use to select it and initialize the slider plugin.

<!-- html -->
<div class="wrapper">
  <div id="demo-slider"></div>
</div>

// javascript
var slider = document.getElementById('demo-slider');
noUiSlider.create(slider, {
    start: '20',
    connect: [true, false],
    range: {
        'min': 0,
        'max': 100
    }
});

Multiple Handles

You can add multiple handles to the slider by adding multiple values to the start option; one value for where each handle should start.

<!-- html -->
<div class="wrapper">
  <div id="demo-slider-handles"></div>
</div>

// javascript
var slider_handles = document.getElementById('demo-slider-handles');
noUiSlider.create(slider_handles, {
    start: ['20', '40'],
    connect: !0,
    range: {
        'min': 0,
        'max': 100
    }
});

For more details on the available configuration options make sure you check out the official noUiSlider documentation.