雙端範圍滑桿
雙 handle 選取數值區間，附即時數值氣泡，適合價格篩選。
以兩個可拖曳的 handle 選取數值區間，中段軌道高亮顯示選取範圍，拖曳或聚焦時上方浮現即時數值氣泡，內建防交錯與完整鍵盤操作，常用於價格篩選、時間區段等場景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0
100
1
1
<RangeDualSlider />
安裝
npx shadcn@latest add https://webberui.com/r/range-dual-slider.json或在 components.json 設定 registries 後，改用 @webberui/range-dual-slider 安裝。
安裝依賴後，從 registry JSON（/r/range-dual-slider.json 的 files[0].content）複製 range-dual-slider.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { RangeDualSlider } from "@/components/ui/range-dual-slider";
const [range, setRange] = React.useState<[number, number]>([1500, 10000]);
<RangeDualSlider
min={0}
max={20000}
step={100}
value={range}
onChange={setRange}
format={(v) => `NT$${v}`}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
min | number | 0 | 區間最小值 |
max | number | 100 | 區間最大值 |
step | number | 1 | 步進值，拖曳與鍵盤操作都會對齊到 step 網格 |
value | [number, number] | — | 受控值：[低值, 高值] |
defaultValue | [number, number] | [min, max] | 非受控模式的初始值 |
onChange | (value: [number, number]) => void | — | 區間變動時回呼（拖曳過程中即時觸發） |
format | (value: number) => string | String | 數值格式化函式，套用於氣泡與 aria-valuetext |
minGap | number | step | 兩個 handle 之間允許的最小間距，防止交錯 |
labels | [string, string] | ["最小值", "最大值"] | 兩個 handle 的無障礙標籤 |
className | string | — | 透傳到最外層容器 |
可及性
- 兩個 handle 皆為
role="slider"，帶有aria-valuemin/aria-valuemax/aria-valuenow，且上下限會隨另一個 handle 的位置動態收斂 aria-valuetext使用format後的可讀文字（例如「NT$1,500」），輔助科技朗讀更自然- 完整鍵盤支援：方向鍵單步調整、
PageUp/PageDown十倍步進、Home/End跳至端點 - 鍵盤聚焦時同樣顯示數值氣泡，並有清晰的 focus ring
- 使用者系統開啟「減少動態效果」時，氣泡與 handle 縮放改為即時顯示，不做彈簧動畫