僅 CSS Tailwind CSS 範圍滑桿，具有主要、次要、重音和語義顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
範圍元件允許使用者使用互動式滑桿選擇定義範圍內的數值。範圍滑桿採用原生 HTML 範圍輸入和平滑樣式構建，可提供對連續值的直覺控制。 Frutjam 系列系統支援多種尺寸、顏色和狀態，非常適合音量控制、價格過濾器和時間軸清理。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| range | 根據 | 樣式範圍滑桿輸入 |
| range-xs | 尺寸 | 特小號 |
| range-sm | 尺寸 | 小的 |
| range-md | 尺寸 | 中（預設） |
| range-lg | 尺寸 | 大的 |
| range-xl | 尺寸 | 特大號 |
| range-primary | 顏色 | 主要主題顏色 |
| range-secondary | 顏色 | 次要主題色 |
| range-accent | 顏色 | 強調主題顏色 |
| range-neutral | 顏色 | 中性主題色 |
| range-info | 顏色 | 訊息語意顏色 |
| range-success | 顏色 | 成功語意色 |
| range-warning | 顏色 | 警告語意顏色 |
| range-error | 顏色 | 錯誤語意顏色 |
基本用法
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
範圍尺寸
html
1 2 3 4 5 | <input type="range" min="0" max="100" value="40" 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="40" class="range range-md"> <input type="range" min="0" max="100" value="40" class="range range-lg"> <input type="range" min="0" max="100" value="40" class="range range-xl"> |
色彩範圍
html
1 2 3 4 5 6 7 8 | <input type="range" min="0" max="100" value="40" class="range"> <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-accent"> <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-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-error"> |
範圍與步驟
html
1 2 3 | <input type="range" min="0" max="100" step="10" value="40" class="range"> <input type="range" min="0" max="100" step="5" value="40" class="range range-primary"> <input type="range" min="0" max="100" step="1" value="40" class="range range-secondary"> |
帶標籤的範圍
html
1 2 3 4 5 6 7 8 9 | <label> <span class="block text-sm font-medium mb-2">Volume</span> <input type="range" min="0" max="100" value="70" class="range range-primary"> </label> <label> <span class="block text-sm font-medium mb-2">Price Range: $20 - $80</span> <input type="range" min="0" max="100" value="50" class="range"> </label> |
禁用範圍
html
<input type="range" min="0" max="100" value="40" class="range" disabled> |
帶標記的範圍
0
25
50
75
100
html
1 2 3 4 5 6 7 8 9 10 | <div> <div class="flex justify-between text-xs mb-2"> <span>0</span> <span>25</span> <span>50</span> <span>75</span> <span>100</span> </div> <input type="range" min="0" max="100" value="50" class="range range-primary w-full"> </div> |
使用 Claude Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 範圍 類別名稱和結構。不再有幻覺課程。