Sliders

noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices.

GitHub noUiSlider

Usage

var connectSlider = document.getElementById('slider-connect');

noUiSlider.create(connectSlider, {
    start: 40,
    connect: [true, false],
    range: {
        'min': 0,
        'max': 100
    }
});

Slider colors

<div id="bd-slider-bg-primary" class="slider-bg-primary"></div><br> 
<div id="bd-slider-bg-accent" class="slider-bg-accent"></div><br> 
<div id="bd-slider-bg-gray" class="slider-bg-gray"></div><br>
<div id="bd-slider-bg-success" class="slider-bg-success"></div><br>
<div id="bd-slider-bg-danger" class="slider-bg-danger"></div><br>
<div id="bd-slider-bg-warning" class="slider-bg-warning"></div>

Orientation

The orientation setting can be used to set the slider to vertical or horizontal. Set dimensions! Vertical sliders don’t assume a default height, so you’ll need to set one.

var verticalSlider = document.getElementById('slider-vertical');

noUiSlider.create(verticalSlider, {
    start: 40,
    orientation: 'vertical',
    connect: [false, true],
    range: {
        'min': 0,
        'max': 100
    }
});