必须显式设置min、max、value、step四个属性，否则滑块拖不动、初始值错或提交无数据；需确保value在[min,max]内、name存在、step合理（避免0.1等浮点数）、监听input事件并节流处理。
min、max、value、step 四个属性必须全部显式设置，缺一不可；漏掉任一都会导致行为不一致或值不可控。
为什么滑块拖不动、初始值不对，或提交时取不到数
浏览器对 input[type="range"] 的默认行为很“松”：不设 min 和 max 时按 0–100 处理，但部分旧版 Safari 会忽略未设 min 的情况；不设 value 时，有的取 min，有的取中间值（如 50），不是统一逻辑。
-
min和max必须是有效数字字符串（如"0"、"100"），不能是"0px"或空字符串 -
value初始值必须落在[min, max]范围内，否则会被浏览器自动截断为边界值 - 表单提交时，该字段只有带
name属性才会被包含，别忘了加name="xxx" - 它不支持
required—— 因为 range 输入永远有值，哪怕用户没碰过
step 设多少才靠谱：整数、小数、any 的实际影响
step 不只是控制“每次滑多远”，它直接决定合法取值集合和键盘操作逻辑。设错会导致用户拉不到最大值、方向键失灵、或浮点误差炸开。
- 想选整数，就用
step="1"；要支持一位小数，优先用step="1"+ 后端/JS 缩放（比如 min="0" max="100" 表示 0.0–1.0，读值后除以 100） - 避免
step="0.1"这类小数——JavaScript 读input.value可能得"0.30000000000000004"，校验和显示都麻烦 -
step="any"允许任意精度，但会禁用键盘方向键微调，且表单验证不拦截非法值，需 JS 二次校验 - 若
max - min不能被step整除（如min="0" max="1" step="0.33"），最后一档可能永远达不到max，建议运行时检查input.valueAsNumber === parseFloat(input.max)是否成立
监听变化该用 input 还是 change？移动端怎么防卡顿
用 input 事件。它在拖动过程中持续触发；change 只在松手或失焦后触发一次 —— 做实时预览时绑 change 就等于让用户“看不见反馈”。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对快速滑动有节流，可加
{ passive: false }选项确保响应性：el.addEventListener('input', handler, { passive: false }) - 别在
input回调里直接重绘 Canvas 或频繁修改 DOM 样式，改用requestAnimationFrame节流 - 记得把
event.target.value转成数字：Number(el.value)或parseFloat(el.value)，不能直接拿字符串做计算 - 某些安卓 WebView 对
touch-action支持不稳定，加touch-action: manipulation到input元素上能显著改善 iOS 响应，但别依赖它解决所有卡顿
样式定制最易失效的三个点：伪元素、宽度、缩放
WebKit（Chrome/Safari）、Firefox、Edge 使用完全不同的伪元素语法，漏写一套就会回退到丑默认样式；更麻烦的是，某些 CSS 属性在不同引擎下被强制忽略。
- 轨道样式必须分开写：
input[type="range"]::-webkit-slider-runnable-track（Chrome/Safari）和input[type="range"]::-moz-range-track（Firefox），不能只写一个 - 滑块按钮同理：
::-webkit-slider-thumb和::-moz-range-thumb都得有，且width/height至少设为24px才保证移动端可点 ——transform: scale()在 iOS Safari 上不响应触摸 - 别给
input设width: 100%再套 flex 布局，某些安卓 WebView 会把滑块渲染错位；稳妥做法是父容器设display: flex，子元素用flex: 1或固定宽度（如width: 300px）
真正难的不是写出来，而是让 step、视觉刻度、JS 计算、无障碍语义四者对齐 —— 尤其当你要加自定义刻度标签时，CSS 无法用百分比精确对齐每个 step 位置，只能靠固定宽度 + 手动算比例，稍一变动就得全调。
