Range slider is used to select a value by sliding a handle.
| Class name | Type | |
|---|---|---|
| range | Component | For <input> tag |
| 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" /><input type="range" min="0" max="100" value="25" class="$$range" step="25" /> <div class="flex w-full justify-between px-2 text-xs"> <span>|</span> <span>|</span> <span>|</span> <span>|</span> <span>|</span> </div>
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex w-full justify-between px-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex w-full justify-between px-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div>
<input type="range" min="0" max="100" value="25" class="$$range" step="25" />
<div class="flex w-full justify-between px-2 text-xs">
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
<span>|</span>
</div><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="40" class="$$range $$range-xs" /> <input type="range" min="0" max="100" value="50" class="$$range $$range-sm" /> <input type="range" min="0" max="100" value="60" class="$$range $$range-md" /> <input type="range" min="0" max="100" value="70" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-lg" />
<input type="range" min="0" max="100" value="40" class="$$range $$range-xs" />
<input type="range" min="0" max="100" value="50" class="$$range $$range-sm" />
<input type="range" min="0" max="100" value="60" class="$$range $$range-md" />
<input type="range" min="0" max="100" value="70" class="$$range $$range-lg" /><input type="range" min="0" max="100" value="40" class="$$range $$[--range-shdw:yellow]" />
<input type="range" min="0" max="100" value="40" class="$$range $$[--range-shdw:yellow]" />
<input type="range" min="0" max="100" value="40" class="$$range $$[--range-shdw:yellow]" />
<input type="range" min="0" max="100" value="40" class="$$range $$[--range-shdw:yellow]" />