跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Range Component

CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

範圍元件允許使用者使用互動式滑桿選擇定義範圍內的數值。範圍滑桿採用原生 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>