Sliders in Pages are powered by noUiSlider and Ion.RangeSlider, which are lightweight jQuery Range Slider plugins that come with tons of options and support for multiple devices.
noUiSlider
Follow these steps to include noUiSlider in your page
Step one
Include stylesheet jquery.nouislider.css inside the <head>
<!-- Element to be used with the plugin -->
<div id="noUiSlider" class="bg-master"></div>
<script>
$(document).ready(function() {
// Apply the plugin to the element
$("#noUiSlider").noUiSlider({
start: 40,
connect: "lower",
range: {
'min': 0,
'max': 100
}
});
});
</script>
Color options
Slider color can be changed by appending the pre-defined classes. Please refer to Color guide for all the color options
<!-- Element to be used with the plugin -->
<div class="irs-wrapper">
<input type="text" id="ionSlider" name="ionSlider" value="0;2057" />
</div>
<script>
$(document).ready(function() {
// Apply the plugin to the element
$("#ionSlider").ionRangeSlider({
min: 0,
max: 5000,
type: 'double',
prefix: "$",
maxPostfix: "+",
prettify: false,
hasGrid: true
});
});
</script>
Color options
Slider color can be changed by appending the pre-defined classes.
