noUiSlider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

Page Demo Plugin Website

Single Slider

<div id="input-slider"></div>

<div class="form-group">
    <input type="text" class="form-control" id="input-slider-value" />
</div>
if($('#input-slider')[0]) {
    var slider = document.getElementById ('input-slider');

    noUiSlider.create (slider, {
        start: [20],
        connect: 'lower',
        range: {
            'min': 0,
            'max': 100
        }
    });

    slider.noUiSlider.on('update', function( values, handle ) {
        document.getElementById('input-slider-value').value = values[handle];
    });
}

Range Slider

<div id="input-slider-range"></div>

<div class="row form-row">
    <div class="col-6">
        <div class="form-group">
            <input type="text" class="form-control" id="input-slider-range-value-1" />
        </div>
    </div>

    <div class="col-6">
        <div class="form-group">
            <input type="text" class="form-control" id="input-slider-range-value-2" />
        </div>
    </div>
</div>
if($('#input-slider-range')[0]) {
    var sliderRange = document.getElementById ('input-slider-range');
    var sliderRangeUpper = document.getElementById('input-slider-range-value-1');
    var sliderRangeLower = document.getElementById('input-slider-range-value-2');
    var sliderRangeInputs = [sliderRangeUpper, sliderRangeLower]

    noUiSlider.create(sliderRange, {
        start: [20, 80],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });

    sliderRange.noUiSlider.on('update', function( values, handle ) {
        sliderRangeInputs[handle].value = values[handle];
    });
}
Files required:
Type Files
Custom SCSS /src/scss/inc/vendor-overrides/_nouislider.scss
Javascript /src/js/vendors/nouislider.js
Library /resources/vendors/nouislider/nouislider.min.css /resources/vendors/nouislider/nouislider.min.js