Elastic Slider

把手拉伸帶彈簧物理的滑桿，拖過邊界時軌道會像橡皮筋一樣延展並回彈。

一支帶阻尼物理的滑桿：拖曳到端點外時，軌道會依阻力延展、圖示被把手推開，放手後以彈簧回彈。支援受控／非受控、鍵盤操作與減少動態偏好。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

最大值max

100

級距（0 為連續值）step

顯示數值showValue

彈性溢出量 (px)maxOverflow

<ElasticSlider />

npx shadcn@latest add https://webberui.com/r/elastic-slider.json

或在 components.json 設定 registries 後，改用 @webberui/elastic-slider 安裝。

安裝依賴後，從 registry JSON（/r/elastic-slider.json 的 files[0].content）複製 elastic-slider.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

import { ElasticSlider } from "@/components/ui/elastic-slider";

<ElasticSlider defaultValue={40} showValue />;

受控用法：傳入 value 與 onValueChange。

const [value, setValue] = React.useState(50);

<ElasticSlider value={value} onValueChange={setValue} />;