Range slider is used to select a value by sliding a handle.
| Class name | Type | |
|---|---|---|
| range | Component | For <input type="range"> tag |
| range-neutral | Color | neutral color |
| range-primary | Color | primary color |
| range-secondary | Color | secondary color |
| range-accent | Color | accent color |
| range-success | Color | success color |
| range-warning | Color | warning color |
| range-info | Color | info color |
| range-error | Color | error color |
| range-xs | Size | Extra small size |
| range-sm | Size | Small size |
| range-md | Size | Medium size [Default] |
| range-lg | Size | Large size |
| range-xl | Size | Extra large size |
<input type="range" min="0" max="100" value="40" class="$$range" />
<input type="range" min="0" max="100" value="40" class="$$range" />
<input type="range" min="0" max="100" value="40" class="$$range" />
<input type="range" min="0" max="100" value="40" class="$$range" /><div class="w-full max-w-xs"> <input type="range" min="0" max="100" value="25" class="$$range" step="25" /> <div class="flex justify-between px-2.5 mt-2 text-xs"> <span>|</span> <span>|</span> <span>|</span> <span>|</span> <span>|</span> </div> <div class="flex justify-between px-2.5 mt-2 text-xs"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div>
<div class="w-full max-w-xs">
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="w-full max-w-xs">
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<div class="w-full max-w-xs">
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<div class="flex justify-between px-2.5 mt-2 text-xs">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div><input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-neutral" /><input type="range" min="0" max="100" value="40" class="$$range $$range-primary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-primary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-primary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-primary" /><input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-secondary" /><input type="range" min="0" max="100" value="40" class="$$range $$range-accent" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-accent" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-accent" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-accent" /><input type="range" min="0" max="100" value="40" class="$$range $$range-success" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-success" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-success" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-success" /><input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-warning" /><input type="range" min="0" max="100" value="40" class="$$range $$range-info" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-info" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-info" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-info" /><input type="range" min="0" max="100" value="40" class="$$range $$range-error" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-error" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-error" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-error" /><input type="range" min="0" max="100" value="30" class="$$range $$range-xs" /> <input type="range" min="0" max="100" value="40" class="$$range $$range-sm" /> <input type="range" min="0" max="100" value="50" class="$$range $$range-md" /> <input type="range" min="0" max="100" value="60" class="$$range $$range-lg" /> <input type="range" min="0" max="100" value="70" class="$$range $$range-xl" />
<input type="range" min="0" max="100" value="30" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-xl" />
<input type="range" min="0" max="100" value="30" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-xl" />
<input type="range" min="0" max="100" value="30" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-xl" /><input type="range" min="0" max="100" value="40" class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
<input type="range" min="0" max="100" value="40"
class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
<input type="range" min="0" max="100" value="40"
class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
<input type="range" min="0" max="100" value="40"
class="$$range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />