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.