SepSlider 滑块组件 v1.1.0

单值/范围滑块 · step 步长 · marks 刻度标记 · tooltip 拖拽提示 · vertical 垂直模式 · disabled 禁用 · 键盘导航 · 触摸支持 · aria 无障碍 · handleRender 自定义手柄 · allowCross/rangeMinDifference 范围约束 · showExtremeValue 极值标签 · debounce 防抖 · autoFocus 自动聚焦 · inputNumberProps 输入框按钮 · formatValue/parseValue 值格式化 · marks 标签防重叠 · color 预设颜色 · railStyle/fillStyle/handleStyle 自定义样式 · className 自定义类名 · tooltipPlacement 位置 · marks 标签对象格式

1. 基础用法

HTML 声明式标签
JS API 初始化
当前值：
30

2. step 步长

HTML 声明式标签
JS API 初始化
step=1（连续）
step=10
step=25，min=0，max=100

3. marks 刻度标记

HTML 声明式标签
JS API 初始化

4. range 范围（双滑块）

HTML 声明式标签
JS API 初始化
当前范围：
[20, 80]
单值 + 输入框
范围 + 输入框

5. tooltip 提示模式

HTML 声明式标签
JS API 初始化
tooltip=true（拖动时显示）
tooltip='always'（始终显示）

6. vertical 垂直模式

HTML 声明式标签
JS API 初始化

7. disabled 禁用状态

HTML 声明式标签
JS API 初始化

8. tipFormatter & onAfterChange

tipFormatter：tooltip 显示格式化值；onAfterChange：松手后才触发回调
tipFormatter → ¥
tipFormatter → 百分比
onAfterChange
--

9. 尺寸 size

HTML 声明式标签
size="sm"
size="md"（默认）
size="lg"
JS API 初始化
size: 'sm'
size: 'lg'

10. reverse 倒序 & dots 步进刻度点

reverse：从大到小排列；dots：自动按 step 打点
reverse（倒序）
dots step=10
reverse + dots

11. 受控模式 value

JS API 初始化（value 受控，需配合 onChange 外部更新）
外部受控值：
50

12. API 交互测试

JS API 初始化
当前值：
50
getState：

13. included / step-null / formatter→null

included（默认 true）：区间内 marks 高亮，区间外变灰；step=null：marks 自由模式无步长限制；tipFormatter→null：隐藏 tooltip
included=true（默认）
included=false
step=null 自由滑停
tipFormatter→null 隐藏
值=50 时隐藏 tooltip

14. 动态阈值颜色 (colorStops)

colorStops 按值区间自动切换 track/handle 颜色，支持 onEnter/onLeave/onColorStopChange 回调
三段阈值: success→warning→danger
当前色区: -
color 函数动态色

15. 无障碍 aria

aria-label / aria-valuetext：屏幕阅读器友好；手柄 role=slider，支持方向键 / Home / End 键盘导航
ariaLabel="音量"
getAriaValueText → "X 度"
range ariaLabel 数组

16. handleRender 自定义手柄

handleRender(value, index) 返回字符串 / HTMLElement / null，自定义手柄内部内容
返回 HTML 字符串
返回 HTMLElement
range 双手柄不同渲染

17. allowCross & rangeMinDifference

allowCross=false：双手柄不可交叉；rangeMinDifference：两端最小间距限制
allowCross=false
rangeMinDifference=20

18. showExtremeValue 极值标签

showExtremeValue：轨道两端显示 min / max 极值
单值极值标签
范围极值标签

19. debounce 防抖

debounce：onChange 回调延迟触发（ms），松手时立即 flush
debounce=500ms
--

20. autoFocus 自动聚焦

autoFocus=true：初始化后自动聚焦手柄，可直接键盘操作

21. inputNumberProps 输入框按钮

inputNumberProps.controls：输入框带 +/− 按钮；可独立设置 step/min/max/disabled
单值 + 加减按钮
范围 + 加减按钮
自定义 step=5

22. formatValue / parseValue 值格式化

formatValue：getValue 输出格式化；parseValue：setValue 输入解析。内部始终存储原始数值
formatValue → "¥X"
getValue: --

23. marks 标签防重叠

刻度密集时自动隐藏被覆盖的标签，窗口 resize 后重新计算

24. color 预设颜色

color 直接指定预设色：primary / success / warning / danger，应用于轨道填充与手柄
color="primary"
color="success"
color="warning"
color="danger"

25. 自定义样式 & className

railStyle：轨道底样式；fillStyle：填充样式；handleStyle：手柄样式；className：自定义类名
railStyle + fillStyle
handleStyle 自定义手柄
className 自定义类

26. tooltip 位置 & 对象配置

tooltipPlacement：tooltip 显示位置；tooltip 对象可同时设置 mode / format / placement 等
tooltipPlacement="bottom"
tooltip 对象配置

27. marks 标签对象格式

marks 值可为对象 { label, style, className }，单个刻度标签自定义样式与类名

28. 自动化断言