slider

使用时机

优先使用 <input type="range">。原生元素开箱即提供键盘支持、触控手势、通过 <datalist> 实现的刻度标记，以及可随表单提交的 value。

role="slider" 适用于原生控件无法表达的自定义控件：

• 双滑块范围选择器（价格最小值/最大值）。
• 非线性刻度（对数刻度、步进式颜色选择器）。
• 在特定设计系统中，原生 input 无法实现所需样式的滑块。

键盘与焦点规范

依据 APG 滑块模式：

• Tab 键将焦点移至滑块滑块。
• 右方向键/上方向键将值增加一步；左方向键/下方向键将值减少一步。
• Page Up / Page Down 按较大增量跳跃（通常为 10%）。
• Home 跳至 aria-valuemin；End 跳至 aria-valuemax。

必须设置 aria-valuenow、aria-valuemin 和 aria-valuemax。若数字值本身不能自我说明含义（如”3”——三颗星？），应添加 aria-valuetext="3 stars"，使屏幕阅读器播报有意义的版本。

对于双滑块选择器，应渲染两个独立的 role="slider" 元素，每个元素的最小值/最大值均反映另一个滑块的当前位置。

常见错误

• 首次渲染时缺少 aria-valuenow，导致滑块没有可播报的值。
• 拖动后未更新滑块值，屏幕阅读器将永久播报初始值。
• 音量滑块范围为 0 到 100，却未设置 aria-valuetext——用户只听到”47”，没有任何单位。
• 键盘步长过大。0 到 100 的滑块若以 10 为步长跳跃，屏幕阅读器用户将无法选取 53。
• 双滑块被渲染为单一元素并使用 aria-valuetext="20 to 80"。用户无法独立调整两个边界值。

示例

<!-- 推荐方式 -->
<label for="vol">Volume</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- 自定义滑块 -->
<div id="brightnessLabel">Brightness</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>