属性

属性	类型	默认值	说明
v-model	number | [number, number]	—	必需。单值或区间值。
label	string	—	必需。滑块名称。
id	string	—	关联 ID 的前缀。省略时自动生成。
min	number	0	最小值。
max	number	100	最大值。
step	number	1	每步的增量。必须大于 0。
minStepsBetweenThumbs	number	0	区间两个滑块之间的最小步数。
orientation	'horizontal' | 'vertical'	horizontal	滑动方向。
valueDisplay	'tooltip' | 'text' | 'none'	tooltip	数值的显示方式。
formatValue	(value: number) => string	—	格式化显示值和无障碍数值文本。
marks	SliderMark[]	—	刻度列表。每项包含 value 和可选的 label。
description	string	—	标签下方的说明。
isLabelHidden	boolean	false	隐藏视觉标签。保留无障碍名称。
isDisabled	boolean	false	阻止修改。不提交表单值。
disabledMessage	string	—	禁用原因。提供原因时，禁用滑块仍可聚焦。
isRequired	boolean	false	显示必填提示。不会执行原生必填校验。
isOptional	boolean	false	显示可选提示。优先于 isRequired。
requiredLabel	string	Required	必填提示文本。
optionalLabel	string	Optional	可选提示文本。
minLabel	string	Minimum value	区间下限的无障碍名称。
maxLabel	string	Maximum value	区间上限的无障碍名称。
width	number | string	—	整个字段的宽度。数字按 px 处理。
htmlName	string	—	隐藏表单字段的名称。
form	string	—	关联表单的 ID。
status	FieldStatusInput	—	字段的错误、警告或成功状态。
labelIcon	Component	—	标签前的装饰图标。
labelTooltip	string	—	标签旁的信息提示。

事件

• update:modelValue(value)：更新单值或区间。
• change(value)：数值改变时触发。
• changeEnd(value)：拖动结束、指针取消或键盘调整结束时触发。

键盘每次有效按键都触发 changeEnd。 到达边界后，值不变时不触发 change。 拖动过程中禁用组件会中止本次拖动。 中止时不触发 changeEnd。

区间与步长

• 单值模式使用 number。
• 区间模式使用 [number, number]。
• 步长从 min 开始计算。
• 最小间隔为 minStepsBetweenThumbs × step。
• 两个滑块不能越过彼此。
• 越界的传入值按边界显示。
• 传入区间按从小到大显示。
• 组件不会因修正显示值而主动修改绑定值。
• 非正步长按 1 处理。
• max 小于 min 时，区间收缩到 min。

表单

• 设置 htmlName 后，单值提交一个隐藏字段。
• 区间提交两个同名隐藏字段。
• 使用 FormData.getAll(name) 读取区间。
• 禁用滑块不提交值。
• 原生表单重置不会改变 v-model。
• 需要重置值时，在表单的 reset 事件中更新绑定值。

模板引用与属性

• element：滑动区域的 HTMLDivElement | null。
• focus(index = 0, options?)：聚焦指定滑块。
• blur()：移除滑块焦点。
• class、style 和其他属性应用于字段外层。
• aria-labelledby 和 aria-describedby 合并到每个滑块。
• 组件管理滑块的角色、当前值、边界和禁用状态。
• labelIcon 插槽替换标签图标。

主题

.my-slider {
  --astryx-slider-accent: #047857;
  --astryx-slider-focus: #047857;
  --astryx-slider-height: 200px;
}

• --astryx-slider-track：未选轨道颜色。
• --astryx-slider-accent：已选轨道和滑块颜色。
• --astryx-slider-focus：键盘焦点颜色。
• --astryx-slider-height：垂直滑块的高度。

滑块直径固定为 20px。轨道厚度为 4px。 Neutral 自动适配明暗模式。