Application Range Inputs Native with tick marks

Live Preview
<label for="maxVolume">
      <span class="block text-sm font-medium text-gray-900">Max Volume</span>

      <input
        type="range"
        name="maxVolume"
        id="maxVolume"
        min="0"
        max="100"
        value="20"
        list="volumeTicks"
        class="mt-1 w-full"
      />

      <datalist id="volumeTicks">
        <option value="0"></option>
        <option value="25"></option>
        <option value="50"></option>
        <option value="75"></option>
        <option value="100"></option>
      </datalist>
    </label>

Related components

More items from the merged UI library.

View all