range和number输入框需手动监听input事件双向同步值，注意用parseInt/parseFloat转换类型、过滤NaN、统一min/max/step，并用requestAnimationFrame优化移动端性能。
range和number输入框怎么自动同步值
直接用 input[type="range"] 和 input[type="number"] 本身不绑定，必须手动监听事件并更新对方的 value。浏览器不会自动同步，哪怕它们 name 相同、id 一样，或者都绑了同一个 data- 属性。
核心就两条：监听 input 事件（不是 change），然后双向赋值。注意别用 change，它只在失去焦点或拖完才触发，滑动过程中完全没响应。
- 对
range元素监听input，拿到e.target.value，设给number的value - 对
number元素也监听input，把它的value设回range的value - 两者都要加
parseInt()或parseFloat()，否则字符串拼接会导致异常（比如 range 是 "5"，number 输入 "10"，不转类型直接赋值可能让 range 变成 "10" 但显示错位）
为什么number输入框输字母后range会跳回0
因为 number 输入非法字符（如 a、空格）时，其 value 会变成空字符串 ""，再转成数字就是 NaN，而给 range.value 赋 NaN 时，浏览器静默 fallback 到 0。
这不是 bug，是规范行为。解决方式不是阻止输入，而是过滤无效值：
立即学习“前端免费学习笔记（深入）”；
- 监听
number的input时，先检查e.target.value === ""或isNaN(parseFloat(e.target.value)) - 如果是，跳过赋值，或主动恢复上一个有效值（需要缓存）
- 不要用
pattern或onkeypress拦截，移动端软键盘行为不可靠
step、min、max不一致会导致什么问题
如果 range 和 number 的 min、max、step 不统一，用户在任一端输入/拖动超出另一端约束时，值会“被拉回”——比如 range 的 max="100"，number 却允许输 150，那么赋值过去后，range 会立刻跳到 100，造成视觉跳变和逻辑错乱。
- 两个 input 的
min、max、step必须完全一致，建议从 JS 统一写入，避免 HTML 里写死不匹配 -
step尤其关键：range 默认 step=1，number 默认无限制；如果 range 是step="0.1"，number 却没设step="0.1"，用户输1.23后，range 会四舍五入到最近合法值（如1.2或1.3） - 可以用
range.step = number.step在初始化时强制对齐
移动端滑动range时number闪动或延迟
主要原因是部分安卓 WebView 或旧版 iOS Safari 对 input 事件节流严重，或在拖动过程中频繁触发但 JS 执行滞后，导致 number 值更新不同步，甚至出现“先跳高再回落”的抖动。
- 不用防抖（
debounce），会丢失中间态；改用requestAnimationFrame批量更新，例如：function syncNumber() { number.value = range.value; } range.addEventListener('input', () => requestAnimationFrame(syncNumber)); - 确保两个 input 都设置了
autocomplete="off"，某些输入法会注入额外事件干扰 - 避免在同步逻辑里做计算或 DOM 查询，只做纯赋值；复杂逻辑（如格式化、单位换算）放到单独函数，不塞进事件回调
