Slider

Slider 用于在连续范围中选择一个值或一段范围。组件基于 Radix Slider 封装，支持受控值、范围值、方向、尺寸、主题色和内部 slot 样式覆盖。

import {
  Slider,
  SliderRange,
  SliderRoot,
  SliderThumb,
  SliderTrack
} from '@skyroc/web-ui';

何时使用

• 需要在连续范围中选择数值，例如音量、亮度、百分比或价格范围。
• 用户更关注相对大小，而不是精确输入。
• 需要范围选择时，可以通过两个值渲染双 thumb。
• 需要精确输入或键盘录入时，优先使用 NumberInput。

基础用法

通过 defaultValue 设置非受控初始值。Slider 会根据 defaultValue 或 value 数组渲染对应数量的 thumb。

<Slider
  defaultValue={[40]}
  max={100}
  step={1}
/>

受控模式

使用 value 和 onValueChange 控制当前值。value 始终是数组，即使只有一个 thumb。

const [value, setValue] = useState([35]);

<Slider
  value={value}
  onValueChange={setValue}
/>

范围选择

传入两个数值会渲染两个 thumb，用于选择范围。可以通过 minStepsBetweenThumbs 控制两个 thumb 的最小间距。

<Slider
  defaultValue={[25, 75]}
  max={100}
  minStepsBetweenThumbs={1}
  step={5}
/>

颜色

通过 color 设置轨道、已选范围和 thumb 的主题色。

方向

通过 orientation="vertical" 使用纵向滑块。纵向滑块需要外层容器提供明确高度。

<div className="h-40">
  <Slider
    defaultValue={[10, 60]}
    orientation="vertical"
  />
</div>

尺寸

通过 size 调整轨道厚度和 thumb 大小，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 覆盖内部 slot。常用 slot 包括 root、track、range 和 thumb。

<Slider
  classNames={{
    track: 'bg-carbon/15',
    range: 'bg-carbon',
    thumb: 'border-carbon'
  }}
  defaultValue={[55]}
/>

API

Slider

主组件组合 Root、Track、Range 和 Thumb。defaultValue / value 的数组长度决定 thumb 数量。

结构组件

需要完全控制结构时，可以手动组合 Root、Track、Range 和 Thumb。

类型