表单与选择@neumorphism-ui/slider

Slider

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

@neumorphism-ui/slider

Registry JSON

预览

价格范围₩32K – ₩72K

纵向排列

安装

npx shadcn@latest add @neumorphism-ui/slider

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

npx shadcn@latest add @neumorphism-ui/slider @neumorphism-ui/label

Import

import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-3">
  <div className="flex justify-between">
    <Label id="depth-label">深度强度</Label>
    <output>64%</output>
  </div>
  <Slider
    defaultValue={[64]}
    min={0}
    max={100}
    step={1}
    aria-labelledby="depth-label"
    thumbLabels={["深度强度"]}
  />
</div>

API 参考

组件	属性	类型	默认值	说明
`Slider`	`value / defaultValue`	`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 \| number[]) => void`	`—`	在调整过程中或调整结束时传递值数组。
`Slider`	`disabled`	`boolean`	`false`	禁用所有 thumb 的交互。

预览

安装

用法

Import

Example

API 参考

无障碍