范围滑块用于通过滑动手柄选择值。
| 类名 | 类型 | |
|---|---|---|
| range | 组件 | 用于 <input type="range"> 标签 |
| range-neutral | 颜色 | 中性色 |
| range-primary | 颜色 | 原色 |
| range-secondary | 颜色 | 二级色 |
| range-accent | 颜色 | 强调色 |
| range-success | 颜色 | 成功色 |
| range-warning | 颜色 | 警告色 |
| range-info | 颜色 | 信息色 |
| range-error | 颜色 | 错误色 |
| range-xs | 尺寸 | 超小尺寸 |
| range-sm | 尺寸 | 小尺寸 |
| range-md | 尺寸 | 中等尺寸[默认] |
| range-lg | 尺寸 | 大尺寸 |
| range-xl | 尺寸 | 超大尺寸 |
<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]" />