ElyriSlider
滑块：单值或双值区间，支持指针拖拽与方向键 / Home / End / PageUp / PageDown 键盘操作，可限定 min / max / step。
安装
添加组件
pnpm dlx @elyri/cli@latest add slider示例
基础用法
通过 defaultValue 指定初始值，拖动滑块或使用方向键调整。
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={40} aria-label="Volume" />;
}区间
value 传数组即为双滑块区间，两个滑块互相约束不会交叉。
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={[20, 60]} aria-label="Price" />;
}步长与范围
用 min / max / step 约束取值，键盘与拖拽都按步长吸附。
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider defaultValue={20} min={0} max={100} step={20} aria-label="Discount" />;
}数值气泡
showValue 在拖拽或键盘聚焦时显示气泡，传 "always" 常驻；formatValue 同时作用于气泡与 aria-valuetext。
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider defaultValue={60} showValue formatValue={(v) => `${v}%`} aria-label="Opacity" />
<Slider defaultValue={[30, 70]} showValue="always" formatValue={(v) => `${v}`} aria-label="Price" />
</div>
);
}刻度点
marks 为 true 时按 step 逐档标注，也可传数组只标注指定值。
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider defaultValue={40} step={10} marks aria-label="Level" />
<Slider defaultValue={50} marks={[0, 25, 50, 75, 100]} aria-label="Zoom" />
</div>
);
}尺寸
三档尺寸：sm / md / lg。
import { Slider } from './components/elyri/Slider';
export function Example() {
return (
<div>
<Slider size="sm" defaultValue={30} aria-label="Small" />
<Slider size="lg" defaultValue={70} aria-label="Large" />
</div>
);
}禁用
禁用后不可拖拽、不响应键盘，且移出焦点序列。
import { Slider } from './components/elyri/Slider';
export function Example() {
return <Slider disabled defaultValue={40} aria-label="Volume" />;
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | number[] | — | 受控值：number 单值，number[] 双值区间 |
defaultValue | number | number[] | — | 非受控初始值，形态与 value 一致 |
onValueChange | (value: number | number[]) => void | — | 值变化回调，单值回传 number、区间回传 number[] |
min | number | 0 | 最小值，默认 0 |
max | number | 100 | 最大值，默认 100 |
step | number | 1 | 步长，默认 1 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸：sm / md / lg |
disabled | boolean | — | 禁用 |
invalid | boolean | — | 校验失败态：标记 aria-invalid，在 Field 内与 Field 的 invalid 取并集 |
name | string | — | 表单字段名：设置后渲染隐藏 input，值可随原生表单提交 |
showValue | boolean | 'always' | false | 数值气泡：true 拖拽 / 聚焦时显示，"always" 常驻 |
formatValue | (value: number) => string | — | 数值格式化，用于气泡文本与 aria-valuetext |
marks | boolean | number[] | — | 刻度点：true 按 step 逐档标注，number[] 仅标注指定值 |