range滑块value默认为50而非0，因浏览器按(min+max)/2隐式计算；必须显式设置value="0"或value="100"等字符串值，并统一min/max/value数值类型，JavaScript中需用Number()转换字符串value以避免运算错误。
range滑块的value默认不是0，而是50
很多人一写就发现滑块停在中间，调音量却默认是“一半”，根本原因是浏览器对value有隐式默认值：不设value时，它取的是min和max的中点（即(min + max) / 2），而默认min="0"、max="100"，所以value自动变成"50"。这不是bug，是规范行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想从最小值开始？必须显式写
value="0"，哪怕min="0" - 想默认满量程（比如音量100%）？写
value="100"，别依赖“没写就从头开始” -
value值必须是字符串形式写在HTML里，写成value=50（无引号）会被忽略 - 如果写的
value超出[min, max]范围（如min="10" max="20" value="5"），浏览器会静默修正为min值（即"10"）
min/max/value类型不一致会导致value被忽略
比如你写min="0.0" max="1.0" value="0.5"没问题，但若写成min="0" max="1" value="0.5"，部分浏览器（尤其是旧版Safari）可能因类型推断混乱而丢弃value，最终回退到默认50或min。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 整数区间就全用整数：
min="0" max="100" value="75" - 浮点区间就统一带小数点：
min="0.0" max="1.0" value="0.75" - 避免混用，比如
min="0" max="1.0"——浏览器可能把min当整数、max当浮点，内部计算失准
JavaScript读取value时别忘了转数字
input.value永远返回字符串，哪怕你设了step="1"、拖出来明明是整数，拿到的仍是"30"而不是30。直接参与运算会出错，比如"30" + 1 === "301"。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
Number(input.value)，它能安全处理整数和小数（Number("0.33") → 0.33） - 避免
parseInt()，它遇到"0.33"会截断成0 - 现代浏览器可用
input.valueAsNumber，但它在min/max未设置或非法时返回NaN，不如Number()可控
移动端初始值显示异常？检查CSS重置是否覆盖了value
有些项目为了放大触摸热区，给input[type="range"]加了transform: scale(1.5)，结果发现滑块初始位置偏移、甚至卡死——这不是value没生效，而是缩放后thumb定位逻辑被破坏，浏览器无法正确渲染初始位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 重置样式时，优先用
height、width调轨道和thumb尺寸，别依赖transform: scale() - 务必加
-webkit-appearance: none，否则WebKit系浏览器（Safari/iOS）可能忽略value并按原始样式渲染 - 移动端测试时，用真机检查初始加载瞬间的thumb位置，别只看PC模拟器
