Sliders in Pages are powered by and , 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>
<!-- 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.
