原生<input type="range">无需JS即可工作，需设min、max、step、value；实时响应用input事件和valueAsNumber；样式定制须appearance: none并适配各浏览器伪元素；无障碍需动态设置aria-label、aria-valuenow等属性。
range input 的基础写法和默认行为
HTML 原生 <input type="range"> 就是拉动选数值的滑块，不需要额外 JS 就能工作。它默认提供水平拖动条、可设最小值、最大值、步长和初始值。
常见错误是直接用 <input type="range"> 却没设 min、max 或 value，导致浏览器用默认值（min=0、max=100、value=50），数值范围不符合预期。
-
min和max必须为数字，且min < max，否则滑块不可拖动或行为异常 -
step默认是1；设为"any"可支持小数（但需配合 JS 读取.valueAsNumber，否则.value仍是字符串） - 不设
value时，初始值取min和max的中点（四舍五入），不是min
示例：
<input type="range" min="0" max="100" step="5" value="25">
实时获取滑块当前值的两种可靠方式
仅靠 change 事件会延迟触发（松手才响应），而用户往往需要拖动过程中的实时反馈。必须用 input 事件——它在每次拖动/键盘微调时都触发。
另一个关键点：不要直接用 e.target.value 做计算，它是字符串；应优先用 e.target.valueAsNumber，它自动转为数字，且对非法值（如空值）返回 NaN，更安全。
-
input事件兼容性好（IE9+），比change更适合实时场景 - 如果用了
step="any"，.valueAsNumber仍能正确解析小数；而parseInt(e.target.value)会截断小数部分 - 避免监听
mousemove或轮询，既多余又影响性能
示例：
slider.addEventListener('input', e => {<br> const num = e.target.valueAsNumber;<br> console.log(num); // 直接是 number 类型<br>});
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
样式定制：覆盖浏览器默认外观的必要步骤
Chrome / Edge / Safari 对 range 的默认样式完全不同，且原生控件由伪元素组成（如 ::-webkit-slider-thumb），不重置就无法统一外观。
最简可行定制：先用 appearance: none 清除所有默认样式，再分别定义轨道（track）和滑块（thumb）的尺寸、颜色、圆角等。注意 Safari 的伪元素名是 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track，Firefox 是 ::thumb 和 ::track（需加 -moz- 前缀）。
- 必须给
thumb设position: relative或显式宽高，否则可能消失 - 移动端上，
thumb太小会导致触摸困难，建议最小尺寸 ≥ 44px × 44px - 不要只写 WebKit 前缀，Firefox 和新 Safari 都需单独适配，否则样式失效
无障碍与可用性容易被忽略的点
range input 天然支持键盘操作（左右方向键、PageUp/PageDown），但若移除了默认样式又没补全 ARIA 属性，屏幕阅读器可能只读出“滑块”，不报当前值或范围。
关键修复项只有三个：aria-label（简明描述用途）、aria-valuenow（实时同步当前值）、aria-valuemin/aria-valuemax（声明范围）。这些属性必须用 JS 动态更新，不能只写死在 HTML 里。
- 不要用
title替代aria-label，后者才是屏幕阅读器实际读的内容 - 如果滑块代表“音量”，
aria-label="音量"比 “调节数值” 更明确 - 禁用状态（
disabled）下，视觉样式和aria-disabled="true"要同时设置，否则键盘用户仍可聚焦
复杂交互（如双滑块范围选择）已超出原生 range 能力，得换用第三方库或自建 canvas 控件。
