职责与结构
滑杆用于调整有上下界的数值。精确数值使用数字输入并允许与滑杆联动；只显示用量或进度使用 meter / progress，不能以只读滑杆替代。
字段名称 + 当前值与单位 + 轨道和滑块 + 上下界说明。填充表示当前数值的相对位置，不默认代表业务健康度。
变体与 Tokens
| 项目 | 规范 |
|---|---|
| 连续／步进 | input type="range" 的 min / max / step；默认 0–100、步长 1。 |
| 精确联动 | range 与 number 共享值、边界和步长；越界或步长不匹配提供校验提示。 |
| 禁用 | disabled 保留数值，说明不可修改原因；原生 range 没有 readonly。 |
| 区间选择 | 双端范围须定义两端名称、焦点顺序与端点限制；当前独立示例为单端，不以两个重叠控件冒充完成的双端组件。 |
复用 .energy-range 轨道、滑块与 44 px 命中高度。--energy-tone 使用 --color-primary，--energy-fill 由 (value − min) / (max − min) 计算。焦点使用共享色，不为每个数值创建颜色。
交互与状态示例
0–100%，每次调整 5%。
可拖动滑块，也可输入精确值。
当前 80%，此项不可修改。
交互与无障碍
Tab 聚焦；方向键按 step 调整，Home / End 到边界，其他平台原生按键保持可用。输出当前值与单位，aria-valuetext 包含单位。input 实时预览，change 用于结束调整后的业务提交。窄屏始终保持可用轨道宽度，数字字段换行。减少动效不影响即时数值反馈。
接入约定
| 项目 | 规范 |
|---|---|
| min / max / step / value / disabled | 使用原生属性，必须 min < max 且 step > 0；本页亮度 0–100%，精确步进 5。 |
| input / change | 原生事件；本页 data-family-range 自动更新 output、填充与 aria-valuetext，带 data-slider-number 时联动精确输入。 |
| 校验与重置 | 精确输入不合法时不覆盖最后有效值；失焦恢复有效值并提示。业务场景从一个状态源更新两个控件。 |
查看最小使用示例
<input class="energy-range" type="range" min="0" max="100" step="5" value="60"
aria-label="画布亮度" data-family-range data-unit="%">维护位置：scripts/family-specimens.mjs；示例行为：scripts/family-specimens.js。组合应用见本页末尾引用。