滑块
Slider
别名:滑块滑动条拖动条调节杆滑杆range 滑块
这是什么
用轨道上可拖动的手柄在连续区间内取值，拖动时数值与已填充轨道实时跟随。 适合调音量、亮度、价格区间等量级选择，比输入框更直观； 可带刻度标记、步进与双端区间形态。
交互实验室
试一试，再决定怎么用拖动滑块或用键盘调整，观察数值变化。
正在加载实验室…
使用时关注什么
- 01显示单位、最小值与最大值，避免模糊数值。
- 02精确输入需求应有数字输入作为补充。
✓ 适用场景
- 在连续区间内选量级（音量、透明度、预算）
- 精确数值不重要，相对大小即可
- 双端选择价格区间等范围场景
✕ 不适用场景
- 需要精确输入，用带验证的数字输入框
- 离散选项少于 5 个，用 radio 或分段控件
- 触控目标过小且无键盘替代，导致拖动困难
常见形式
单值
Single
一个手柄取一个值
带刻度
With marks
轨道下方标注刻度点
双端区间
Range
两个手柄夹出区间
实现要点
appearance::-webkit-slider-thumblinear-gradienttransition自定义外观时隐藏原生 appearance，轨道用 linear-gradient 两段色实现已填充比例 （左 accent 右灰），thumb 用伪元素覆盖并放大触控区。双端区间叠放两个 input[type=range]，pointer-events 只留给 thumb。键盘左右箭头步进， aria-valuenow 同步数值。所有过渡时长乘 --demo-speed。
平台 API
<input type="range">role="slider"相关概念
进度条Progress Bar
用横条从左到右填充来表示任务完成比例的加载指示，常配百分比或步骤文字。 适用于时长可预测的确定性任务：上传、下载、安装与分步表单。
组件相似概念输入框Input
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件相似概念数字滚动Number Counter
数字从 0（或旧值）滚动增长到目标值，让计数过程本身表达"数据在增长"。 常用于数据看板大数字、统计区与里程碑（"10 万用户"）。 数字成为动效的主角，比静态数值更有说服力。
动效搭配使用表单校验Form Validation
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式搭配使用