range 输入框的 value 和 defaultValue 对不上，因为它是受控组件，需通过 onChange 实时同步状态；原生 JS 应用 valueAsNumber 并显式设置 min/max/step；表单提交需手动收集值，且必须设 name 才能被 FormData 包含。
range 输入框的 value 和 defaultValue 为什么总对不上
因为 是“受控组件”时，value 必须始终由 JS 状态驱动；如果只设了一次 defaultValue，后续拖动后 DOM 值变了，但状态没同步，就看起来“失效”了。
- 用 React 时，必须配
onChange实时更新 state，不能只靠defaultValue - 原生 JS 操作时，
input.value返回字符串，得用parseFloat()或直接读input.valueAsNumber（更安全） - 初始值写死在 HTML 里（如
value="50"）只生效一次，JS 修改后它就和 DOM 脱节了
滑块拖动不灵敏或跳变，常见配置漏了哪些
默认步长是 1，最小值是 0、最大值是 100，但实际场景中常需要小数精度或非线性响应——这时不显式设 step、min、max 就会出问题。
-
step不写就是 1，想支持 0.1 就得写step="0.1"；设成"any"可自由输入，但失去数值校验 -
min和max必须是数字字符串，写成min="-5"没问题，但min="-5.5"在部分旧浏览器里可能被截断 - 移动端 iOS Safari 对
step="any"支持差，拖动后input.valueAsNumber可能仍是整数
如何让 range 滑块显示实时数值反馈
HTML 本身不提供 tooltip 或 label 同步更新能力，得靠 JS 绑定事件手动更新 DOM，且要注意防抖和渲染时机。
- 监听
input事件（不是change），它在拖动过程中持续触发 - 避免直接 innerHTML 写入，用
textContent更快，也防 XSS（尤其数值来自用户输入时） - 示例：
const slider = document.querySelector('input[type="range"]');<br>const display = document.querySelector('#value-display');<br>slider.addEventListener('input', () => {<br> display.textContent = slider.valueAsNumber.toFixed(1);<br>});
range 在表单提交时为什么拿不到值
因为 默认不会出现在 FormData 中，也不参与原生表单序列化（form.serialize() 类库通常也忽略它），除非显式包含或手动收集。
- 表单提交前，用
new FormData(form)时，range 输入框只有设置了name属性才会被包含 - 若用 fetch 提交 JSON，必须手动取
slider.valueAsNumber，别依赖slider.value字符串（尤其 step 是小数时） - Vue/React 中，如果没绑定
v-model或value+onChange，它的值根本不在组件状态里，自然提不出去
range 的坑不在样式，而在值流：它看似简单，实则从 DOM 属性、事件时机、表单集成到跨端行为，每层都容易静默失联。最常被忽略的是——它不自动参与表单数据流，也不默认触发重渲染，所有“联动”都得你亲手接上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
