Slider

轨道是一道细长的斜切凹槽，选中的区段以强调色显示；每个滑块是一块斜切块，拖动时变为强调色。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/slider

示例

单值与范围

Radio volume40

On duty9:00 – 17:00

slider-basic.tsx

import { useState } from "react";import { Slider } from "@/components/zero/slider";export default function SliderBasic() {  const [volume, setVolume] = useState(40);  const [hours, setHours] = useState([9, 17]);  return (    <div className="grid w-full max-w-md gap-6">      <div className="grid gap-2">        <span className="flex justify-between font-bold font-zero text-zero-sm text-zero-text-2 italic">          Radio volume          <span className="text-zero-text tabular-nums">{volume}</span>        </span>        <Slider          value={volume}          onValueChange={(value) => setVolume(value as number)}          aria-label="Radio volume"        />      </div>      <div className="grid gap-2">        <span className="flex justify-between font-bold font-zero text-zero-sm text-zero-text-2 italic">          On duty          <span className="text-zero-text tabular-nums">            {hours[0]}:00 – {hours[1]}:00          </span>        </span>        <Slider          value={hours}          onValueChange={(value) => setHours(value as number[])}          min={0}          max={24}          minStepsBetweenValues={1}          aria-label="On duty"        />      </div>    </div>  );}

行为

传入一个数值时为单个滑块，传入两个数值组成的数组时为范围选择。按方向键，获得焦点的滑块移动一个步长；按 Page Up 或 Page Down 则移动更多。

仅支持水平方向。尺寸以 em 为单位。

属性

Slider

属性	类型	默认值	说明
value	number \| number[]	—	当前值（受控），配合 onValueChange 使用。
defaultValue	number \| number[]	—	默认值（非受控）。
min	number	0	最小值。
max	number	100	最大值。
step	number	1	步长，即按一次方向键时滑块移动的量。
minStepsBetweenValues	number	0	范围选择时，两个滑块之间允许的最小间距（以步长计）。

另可传入 Base UI Slider.Root 的全部属性。