Range slider
To be able to use the range slider in your application you will need to install the nouislider dependency with npm install nouislider
.
All options and features can be found here.
Basic range slider
<div class="form-range" id="range-color"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
window.noUiSlider && (noUiSlider.create(document.getElementById('range-color'), {
start: 40,
connect: [true, false],
step: 10,
range: {
min: 0,
max: 100
}
}));
});
</script>
That’s only the basic features and options of range slider. More possibilities can be found here.