<input type="range"> 默认值50、范围0–100，需设min/max确保逻辑一致；用input事件实现实时反馈，change用于提交；value为字符串须转换；自定义样式须重置appearance并兼容各浏览器伪元素；非线性映射应封装函数；务必添加aria-valuetext提升无障碍体验。
用 <input type="range"> 创建基础滑块
直接写 <input type="range"> 就能生成一个可拖动的范围滑块，它默认值是 50，取值范围是 0–100。不需要额外 JS 就能响应用户拖动，value 属性会实时更新。
常见错误是忘记设 min 和 max，导致逻辑和 UI 不一致。比如想控制音量（0–1），却没改默认 0–100，结果 JS 里读到的 event.target.value 是字符串 "37" 而不是 0.37。
-
min和max必须是数字，不支持百分比或单位 -
step控制最小步进值，设为"any"允许任意精度（但注意输入法可能仍按整数步进） - 加
id和label[for]提升可访问性，否则屏幕阅读器无法关联描述
监听滑块变化：用 input 事件而非 change
input 事件在每次拖动过程中持续触发，适合做实时反馈（如预览、音量条同步）；change 只在松手后触发一次，适合提交或保存。
容易踩的坑是绑定 change 却期望实时响应——用户拖动时界面毫无反应，直到松手才跳变，体验割裂。
立即学习“前端免费学习笔记（深入）”；
- 实时场景（如调节亮度）：监听
input，直接读event.target.value - 防抖提交（如滤镜强度）：用
change+setTimeout避免高频写入 - 注意
value始终是字符串，需parseFloat()或Number()转换
自定义样式：覆盖浏览器默认外观的关键 CSS 属性
各浏览器对 <input type="range"> 的渲染差异极大，必须重置伪元素才能统一。核心是控制 ::-webkit-slider-thumb（Chrome/Safari 拖块）和 ::-webkit-slider-runnable-track（轨道），Firefox 则用 ::thumb 和 ::track。
常见失败是只写 WebKit 样式，结果 Firefox 下完全没效果，或者漏掉 appearance: none 导致旧版 Safari 样式残留。
- 必须先加
appearance: none清除原生样式 - Webkit 下拖块要用
background+border-radius，不能只靠width/height - Firefox 中
::track默认不可见，需显式设background - 移动端点击区域小，建议用
transform: scale(1.2)扩大拖块触控面积
处理非线性映射：比如对数音量或色相环
原生滑块输出的是线性值（0→100），但很多场景需要非线性映射：音量感知是近似对数关系，HSL 色相 0° 和 360° 实际等价。硬编码转换容易出错。
典型错误是把转换逻辑写死在事件回调里，导致同一滑块在不同上下文复用困难，或忘记反向计算（比如从音量值还原滑块位置）。
- 封装映射函数，例如
linearToLog(value, minDB, maxDB)，输入 0–100 输出 -60dB～0dB - 若需双向同步（如外部设音量后滑块自动跳转），提前缓存原始线性值，避免浮点误差累积
- 色相类循环值慎用
step="1"，应设max="360"并在 JS 中用% 360归一化
aria-valuetext 时，VoiceOver 会读 “slider 50 of 100”，而不是 “volume 50 percent”。如果值有业务含义（如“低/中/高”），必须动态更新这个属性。 
