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"
  x-data="{
    updatePercent(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}%`);
    }
  }"
  x-init="updatePercent($el)"
  @input="updatePercent($el)"
>