直接写 <input type="range"> 可渲染原生滑块，但需显式设置 min、max、value 和 step 保证兼容性与稳定性；应监听 input 事件实现实时响应，配合 appearance: none 及浏览器前缀伪元素定制样式，并确保无障碍支持（label 关联、tabindex、ARIA 属性）。
如何用 <input type="range"> 实现基础滑块
直接写 <input type="range"> 就能渲染出原生滑块，但默认无值、无反馈、交互体验差。必须显式设置 min、max 和 value 才能可靠工作：
-
min和max决定拖动范围（默认是 0–100），不设会导致部分浏览器取值异常（比如 Safari 可能返回 NaN） -
value必须初始化，否则首次获取element.value可能为空字符串，引发类型错误 - 建议始终搭配
step（如step="1"或step="0.1"），避免浮点精度导致的跳变或卡顿
示例：
<input type="range" min="0" max="100" value="50" step="1">
监听滑块变化该用 input 还是 change？
用 input 事件——它在拖动过程中实时触发；change 只在松手后触发一次。多数场景（如音量调节、亮度预览）需要即时响应，所以：
- 绑定
addEventListener('input', handler)，不要用oninput属性（不利于复用和测试） - 避免在 handler 里直接操作 DOM 大量重排，可节流（如
requestAnimationFrame包裹更新逻辑） - 注意移动端 touch 事件可能干扰，但现代浏览器对
input事件已统一支持 touch drag，无需额外 polyfill
样式自定义：WebKit 和 Firefox 的伪元素差异
Chrome/Safari 用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track；Firefox 用 ::thumb 和 ::track。IE 已淘汰，不用兼容。
立即学习“前端免费学习笔记（深入）”；
- 必须分别写两套规则，且 Firefox 的伪元素选择器不能加前缀
-
appearance: none要加在<input>本身上，否则 WebKit 下伪元素不生效 - 修改 thumb 大小后，track 的 padding 需手动调整，否则 thumb 拖动会“悬空”或越界
示例关键 CSS：
input[type="range"] { appearance: none; }<br>input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; }<br>input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
无障碍与键盘支持容易被忽略的点
原生 range 输入框默认支持键盘（左右方向键、PageUp/PageDown），但前提是：
- 必须有
label关联（用for或嵌套），否则屏幕阅读器无法识别控件用途 - 不能禁用
tabindex，否则键盘无法聚焦；也不建议设tabindex="-1"（破坏可访问性） - 若动态更新
min/max，需同步调用aria-valuemin/aria-valuemax，否则 NVDA/JAWS 读数错乱
复杂交互（如双滑块区间选择）建议改用 role="slider" + ARIA 手动实现，原生 range 不支持多 thumb。
