Range slider

Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.

To be able to use the range slider in your application you will need to install the noUiSlider dependency with npm install nouislider.

Basic range slider

<div id="range-simple"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.noUiSlider &&
      noUiSlider.create(document.getElementById("range-simple"), {
        start: 20,
        connect: [true, false],
        step: 10,
        range: {
          min: 0,
          max: 100,
        },
      });
  });
</script>

For more details on customizing a noUiSlider element, see the documentation on the noUiSlider website.