Slider

An input where the user selects a value from within a given range.

Usage

You can style an <input type="range"> element by either adding the input class or having a parent with the form class (read more about form). However, the range input also requries some Javacript code to be able to paint the left side of the slider.

<input
  type="range"
  class="input w-full"
  min="0"
  max="100"
  value="50"
>
<script>
  (() => {
    const sliders = document.querySelectorAll('input[type="range"].input');
    if (!sliders) return;

    const updateSlider = (el) => {
      const min = parseFloat(el.min || 0);
      const max = parseFloat(el.max || 100);
      const value = parseFloat(el.value);
      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
      el.style.setProperty('--slider-value', `${percent}%`);
    };

    sliders.forEach(slider => {
      updateSlider(slider);
      slider.addEventListener('input', (event) => updateSlider(event.target));
    });
  })();
</script>