COMPONENT 35 · Selection & Values
滑块
Slider
也叫Range InputTrackbarSeek Bar滑杆NSSlider
拖动轨道上的滑块，在连续或分级范围中选择单个值。
Chooses one value from a continuous or stepped range by moving a thumb along a track.
ANATOMY & USAGE
结构与使用建议
组成部分
- 轨道
- 已选范围
- 滑块 / Thumb
适合使用
- 用户更关心相对大小，且可通过拖动快速调整时。
不建议使用
- 必须精确输入数值或范围没有合理上下界时。
键盘与无障碍
- 提供名称、当前值和单位；支持方向键、PageUp/Down，并提供可替代的精确输入。
DESCRIBE IT TO AI
这样告诉编程助手
实现滑块（Slider）：拖动轨道上的滑块，在连续或分级范围中选择单个值。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo stack">
<label for="range">滑块：<output>40</output>
</label>
<input id="range" type="range" min="0" max="100" value="40">
</div>