Slider

滑块：指针拖动与键盘（方向键、PageUp/Down、Home/End）调节数值，支持步长与禁用。

#slider #range #form

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

SliderProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">

属性	类型	默认值	说明
value	`number`	—	—
defaultValue	`number`	`0`	—
onValueChange	`(value: number) => void`	—	—
min	`number`	`0`	—
max	`number`	`100`	—
step	`number`	`1`	—
disabled	`boolean`	`false`	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/slider.json

同类组件

Range Slider

表单与控件

双滑块区间选择：两个滑块互不越界，支持最小间距与键盘调节，适合价格筛选。

Date Range Picker

表单与控件

双月日历范围选择器，支持悬停预览、快捷预设和最小/最大日期。

Currency Input

表单与控件

输入时自动加千分位、失焦补两位小数的金额输入框，可切换币种。