Tailwind CSS home page
  1. INPUTS
  2. Slider

​
Basic usage

​
Basic select

<input type="range" min="0" max="100" value="20" class="range w-40" />
<input type="range" min="0" max="100" value="40" class="range accent-red-500 w-60" />
<input type="range" min="0" max="100" value="60" class="range w-60 hover:accent-pink-500" />

​
Slider With Icons

<div class="flex gap-2 p-4">
  <svg ...>
  <input type="range" min="0" max="100" value="40" class="range w-40" />
  <svg ...>
</div>

​
Discrete sliders

| | | | | 
<input type="range" min="0" max="100" value="20" class="range w-60" step="20" />

<div class="flex flex-col">
  <input type="range" min="0" max="100" value="25" class="range absolute w-60" step="25" />
  <div class="w-60 flex justify-between top-0 text-xs px-2">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
</div>

​
usage