可直接使用：，浏览器自动渲染横向滑块，拖动时value实时变化；默认无值显示，需配合及input事件监听实现数值反馈，注意跨浏览器样式差异与step精度问题。
怎么用 <input type="range"> 实现基础滑块
直接写就能用，不需要 JS 也能跑起来：<input type="range" min="0" max="100" value="50">。浏览器会自动渲染成横向滑块，拖动时 value 实时变化。注意它默认没有视觉反馈（比如当前值显示），纯靠表单提交或监听事件取值。
-
min、max、value都得是数字字符串（如"0"），传数字也行，但建议统一写字符串避免隐式转换歧义 - 不设
value时，初始值取min；没设min/max时，默认是0和100 - 移动端点按区域小，建议加
style="width: 100%"或用 CSS 扩大点击热区
滑块值实时显示的常见写法
用户拖动时想立刻看到数值，得靠 input 事件监听——不是 change，后者只在松手后触发一次。
- 监听
input事件最稳妥：el.addEventListener('input', () => { console.log(el.value) }) - 别用
oninput行内属性，不利于逻辑复用和测试 - 显示文案建议用
<output></output>标签配合for属性，语义清晰且支持无障碍读取：<output for="myRange">50</output>
样式定制难在哪？WebKit 和 Firefox 差异大
滑块轨道和滑块按钮的样式控制，各浏览器前缀和伪元素完全不同，改错一个就全失效。
- Chrome/Edge（WebKit/Blink）：用
::-webkit-slider-thumb和::-webkit-slider-runnable-track - Firefox：用
::thumb和::track（无前缀），且必须配合appearance: none - IE 已淘汰，不用管；Safari 对
appearance支持不稳定，慎用圆角/阴影等复杂样式 - 改轨道高度要用
height（WebKit）或height+border（Firefox），不能只靠padding
为什么拖动卡顿或跳变？检查 step 和数值精度
滑块跳变通常不是性能问题，而是 step 值和 min/max 不匹配导致的舍入误差。
立即学习“前端免费学习笔记（深入）”；
-
step="1"搭配min="0" max="10"没问题；但step="0.1"+max="1"在浮点运算下可能产生0.30000000000000004这类值 - 避免用小数
step，改用整数缩放：比如想控制 0–1.0 以 0.01 为步进，就设min="0" max="100" step="1"，读值时除以 100 - 频繁触发
input事件时，别在回调里直接操作 DOM，先requestAnimationFrame节流
真正麻烦的是无障碍支持——键盘方向键、PageUp/PageDown 的行为由浏览器原生控制，无法用 CSS 或简单 JS 覆盖，得靠 aria-valuetext 等属性补全语义。
