noUiSlider - Input Slider

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" />
    <i class="form-group__bar"></i>
</div>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)

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="form-group">
    <input type="text" class="form-control" id="input-slider-value-1" />
    <i class="form-group__bar"></i>
</div>

<div class="form-group">
    <input type="text" class="form-control" id="input-slider-value-2" />
    <i class="form-group__bar"></i>
</div>
// Function available at /js/app.min.js (concat from /js/inc/functions/vendors.js)

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];
    });
}

Color variants

Optional color variants can be added using modifier classes

<div class="input-slider input-slider--blue"></div>

<div class="input-slider input-slider--red"></div>

<div class="input-slider input-slider--amber"></div>

<div class="input-slider input-slider--green"></div>

Requirements:

  • /scss/inc/vendor-overrides/_nouislider.scss
  • /vendors/nouislider/nouislider.min.css
  • /vendors/nouislider/nouislider.min.js