组件 · 数据录入
Slider 滑块
数值滑块输入。
使用建议
- 避免:杜撰未导出的 tipFormatter
- 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造
引入
tsx
import { Slider } from '@selrux/ui/slider';演练场
调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
代码演示
基础用法
单值滑块。
范围选择
value 为 [起点, 终点]。
语义色与禁用
color 语义色,disabled 禁用。
受控与范围
value / onValueChange 受控并显示当前值;min / max 设定区间;size 尺寸;nameEnd 为区间终点的表单字段名。
¥2000 – ¥8000
纵向
orientation="vertical",需要容器提供高度。
API
属性覆盖:示例用到 10 / 10 个自有属性(100%)
由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。
Slider
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
color | - | "info" | "success" | "warning" | "primary" | "destructive" | "carbon" | "secondary" | "accent" | - |
value | - | SliderValue | - |
defaultValue | - | SliderValue | - |
onValueChange | - | ((value: SliderValue) => void) | - |
min | - | number | - |
max | - | number | - |
step | - | number | - |
orientation | - | "horizontal" | "vertical" | - |
nameEnd | 表单多值时第二个 name,默认 ${name}-end。 | string | - |
另有 279 项原生属性与事件继承自 HTMLAttributes,原样透传。
导出类型:SliderColor、SliderOrientation、SliderProps、SliderSize、SliderValue