组件 · 数据录入

Slider 滑块

数值滑块输入。

入口 @selrux/ui/slider · 源码 src/components/slider/index.ts · 1 个组件 · 发布状态 preview

使用建议

  • 避免:杜撰未导出的 tipFormatter
  • 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造

引入

tsx
import { Slider } from '@selrux/ui/slider';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

color 作用在已填充轨道;vertical 时容器提供高度。

代码演示

基础用法

单值滑块。

范围选择

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