React 组件

UGSlider 数值滑块

用于在连续或离散区间内选择数值，支持单值、范围、方向、刻度、提示和完整提交语义。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGSlider } from '@ug666/ui-react'

基础与步进

拖动、点击轨道和方向键遵循同一边界与步进；区间模式点击轨道时移动最近手柄。

区间选择

传入二元数组后显示两个滑块，并保证起始值不会越过结束值。

20 – 70

刻度与格式化

marks 只负责说明关键位置，formatTooltip 负责面向用户的数值表达。

50%

静音适中最大

离散停靠与标记步进

showStops 展示可选位置；step='mark' 时拖动和方向键都只会落在 marks 上。

静音低中最大

数字输入与提示位置

单值横向滑块可与数字输入同步；提示位置和辅助技术文本互不耦合。

65%

垂直方向

垂直滑块通过 height 获得稳定轨道尺寸，适合音频和工具面板。

尺寸与状态

尺寸同时控制交互高度与手柄大小；禁用和表单错误使用独立状态。

原生表单与重置

单值提交一个值，区间提交两个同名值；原生 reset 恢复 defaultValue。

属性

属性	类型	默认值	说明
value / defaultValue	number \| [number, number]	— / 0	受控值或非受控初始值；数组自动启用区间模式。
min / max	number	0 / 100	可选数值范围；传反时会自动纠正边界。
step	number \| 'mark'	1	数值步进；mark 时只能停在 marks 定义的位置。
range	boolean	根据值推断	显式启用双滑块区间选择。
vertical / height	boolean / number \| string	false / 200	切换垂直方向并设置轨道高度。
marks	Record<number, ReactNode \| SliderMark>	—	显示刻度标签，并可为单个标签设置样式。
showValue	boolean	false	在控件旁显示当前单值或区间。
showStops	boolean	false	显示数值步进或 marks 对应的离散停靠点。
showInput / showInputControls	boolean	false / true	单值横向模式显示同步数字输入框，并控制步进按钮。
inputSize	'sm' \| 'default' \| 'lg'	继承 Slider	独立设置数字输入框尺寸。
showTooltip / formatTooltip	boolean / (value) => ReactNode	false / 原值	显示滑块值提示并格式化内容。
tooltipPlacement	'top' \| 'right' \| 'bottom' \| 'left'	水平 top / 垂直 right	设置提示相对滑块的位置。
formatValueText	(value) => string	—	设置屏幕阅读器读取的 aria-valuetext。
rangeStartLabel / rangeEndLabel	string	最小值 / 最大值	为区间的两个滑块提供独立无障碍名称。
disabled / size	boolean / 'sm' \| 'default' \| 'lg'	false / 'default'	禁用交互或继承 ConfigProvider 尺寸。
onValueChange	(value: SliderValue) => void	—	拖动或键盘调整期间触发。
onValueCommit	(value: SliderValue) => void	—	指针释放、失焦或键盘操作结束时触发。
原生属性	InputHTMLAttributes	—	透传 name、aria-*、form 等原生属性到滑块输入。