直接写 会渲染滑块但默认范围0–100、步长1，需显式设置 min、max、value（字符串格式）、step（如 "any" 或 "0.1"）才可控；必须监听 input 事件实现实时响应，注意 value 始终为字符串，须转数字计算。
怎么用 <input type="range"> 设置基础滑块
直接写 <input type="range"> 浏览器就渲染出滑块，但默认值是 0–100，步长为 1，多数场景不适用。必须显式设 min、max、value 和 step 才可控。
-
min和max决定拖动范围，比如音量控制常用min="0" max="1"（浮点），而年龄选择用min="18" max="99"（整数） -
value要和min/max类型一致：如果min="0.0" max="1.0"，value写成"0.5"没问题，但写成0.5（无引号）在 HTML 中无效 -
step默认是 1，设为"any"允许任意精度（如step="any"配合min="0" max="1"可取 0.333）；设为"0.1"则只能停在 0.0、0.1、0.2…
为什么滑块拖不动或数值不更新
常见原因是没监听 input 事件——change 只在松手后触发一次，而用户拖动时需要实时响应，必须用 input。
- JavaScript 中绑定事件要写
element.addEventListener('input', handler)，不是'change' - 如果用 Vue/React 等框架，别只依赖
v-model或受控组件的默认行为，检查是否禁用了原生事件冒泡或拦截了input事件 - 某些 CSS 重置样式（比如全局设
input { pointer-events: none; }）会让滑块完全无法交互，排查时先临时禁用 CSS
移动端滑块太难拖，怎么优化体验
iOS Safari 和 Android Chrome 对 range 的触摸区域默认很小，手指一滑就跳变，根本没法精调。
- 加
style="width: 100%; height: 40px;"显式放大容器高度，iOS 会自动扩展可点击热区 - 不要用
transform: scale()放大滑块，它只缩放视觉，触控坐标不变，反而更难对准 - 安卓上若发现拖动卡顿，检查是否同时绑定了大量同步计算逻辑（比如每帧都重绘图表），把耗时操作节流或移到
requestIdleCallback - 必要时可加
input[type="number"]作为辅助输入框，和滑块双向绑定，弥补精度不足
兼容性与无障碍要注意什么
<input type="range"> 在 IE10+、Edge、Chrome、Firefox、Safari（含 iOS）都支持，但无障碍支持差异大。
立即学习“前端免费学习笔记（深入）”；
- 必须配
<label for="id"></label>，否则屏幕阅读器读不出用途；aria-label或aria-labelledby是补充，不能替代label - IE11 不支持
step="any"，会退化为step="1"，如果业务强依赖小数，得降级用自定义滑块库 - 旧版 Safari（iOS 12.4 及更早）不触发
input事件，只触发change，需检测并 fallback：用setInterval监听value变化（不推荐，仅应急）
value 始终是字符串，哪怕你设 value="50"，JS 里取 input.value 还是 "50"。做计算前不转 Number() 或 parseFloat()，后面所有逻辑都会错。 
