滑块拖不动或没反应主要因未设min/max、误加disabled或pointer-events:none、错用change代替input事件；需用output绑定显示数值，并兼顾键盘与屏幕阅读器兼容性。
type="range" 是 input 标签中一个轻量但容易误用的类型——它不自动提交数值，也不默认显示当前值，更不会在所有浏览器里表现一致。
为什么滑块拖不动或没反应？检查这三点
常见现象：页面加载后滑块灰掉、鼠标悬停无反馈、拖拽时数值不变。
- 没设
min和max：浏览器可能按默认值（0–100）渲染，但若只写value="50"而没定义范围，某些旧版 Safari 会禁用交互 - 写了
disabled但没意识到它会彻底阻断事件监听（input和change都不会触发） - CSS 中误加了
pointer-events: none或父容器遮挡（比如z-index错乱），尤其在封装成组件时容易漏查
input vs change 事件：什么时候该监听哪个？
滑块是少数需要同时关注两个事件的表单控件——因为用户可能拖动中就改变意图。
-
input事件：每次拖动实时触发，适合做即时反馈（如预览、联动计算）。注意：移动端 iOS Safari 在拖动结束前可能延迟触发，别依赖它做关键状态同步 -
change事件：仅在松手/失焦后触发一次，适合提交或存档。若用户拖到某值后直接点其他地方，change仍会触发；但若拖完没松手就刷新页面，该事件不会发生 - 不要只监听
change就以为能覆盖所有场景——比如音量调节必须响应拖动过程，否则体验断裂
怎么让滑块旁边显示当前数值？别硬写 JS 更新 DOM
纯 HTML/CSS 可实现动态数值显示，避免频繁操作 DOM 引发重排。
立即学习“前端免费学习笔记（深入）”；
- 用
output元素 +for属性绑定：<output for="vol">50</output>，再配合 CSS 的::after或 JS 的oninput更新其textContent（推荐后者，兼容性稳） - 避免用
span+innerText拼接：当滑块value是小数时（如step="0.1"），需手动控制精度，否则显示3.0000000000000004 - 移动端注意：iOS 上
range默认高度小，文字易被裁切，建议显式设height和line-height，并用transform: scale()微调 thumb 大小
兼容性和无障碍（a11y）绕不开的坑
这个控件在屏幕阅读器和键盘导航下行为差异大，不能只测鼠标。
- 必须加
aria-label或aria-labelledby，否则 VoiceOver/NVDA 读不出用途（例如“调节亮度”而非“滑块”） - 键盘支持：Tab 进入后，左右方向键可步进，但步长由
step决定；若step="any"，部分浏览器（如 Firefox）会禁用键盘调节 - IE10+ 支持
type="range"，但不支持input事件，只能降级用change；Android 4.4 WebView 对thumb伪元素支持极差，自定义样式基本失效
真正麻烦的不是怎么画出滑块，而是确保它在手指、键盘、语音指令下都给出确定、可预测的反馈——尤其是 step 值和 value 的数值类型匹配，稍不注意就会出现“明明拖到 7 却读成 6.999999”。
