Slider

适合通过相对位置调整数字或范围，而非精确键入的场景。

预览

价格范围与垂直音量

调整初始为 32–72 的双滑块价格范围，并比较初始为 60 的垂直单滑块。

价格范围₩32K – ₩72K

纵向排列

安装

npx shadcn@latest add @neumorphism-ui/slider

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

以数组传值，设置 min、max、step，并为各滑块提供名称。显示当前数值时，用 onValueChange 同步状态与文字。

"use client";

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" thumbLabels={["Volume"]} />;
}

API 参考

基于 Base UI Slider，提供单值与 number[] 范围 API。根据数组项数量创建 thumb，并通过 thumbLabels 为每个 input 命名；同时支持横向、纵向以及受控、非受控值。

组件	属性	类型	默认值	说明
`Slider`	`value / defaultValue`	`number \| readonly number[]`	`min`	每个 thumb 的受控值或非受控初始值。
`Slider`	`min / max`	`number`	`0 / 100`	可选择的数值范围。
`Slider`	`step`	`number`	`1`	键盘和指针调整的步长。
`Slider`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	设置 track 方向和键盘操作轴。
`Slider`	`thumbLabels`	`readonly string[]`	`—`	按值的顺序传给每个真实 thumb input 的无障碍名称。
`Slider`	`onValueChange / onValueCommitted`	`(value: number \| readonly number[]) => void`	`—`	在调整过程中或调整结束时传递单个数值或值数组。
`Slider`	`disabled`	`boolean`	`false`	禁用所有 thumb 的交互。

预览

价格范围与垂直音量

安装

用法

API 参考

无障碍