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 WebsiteSingle 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