使用需确保min/max/value为纯数字字面量、监听input事件获取实时值、用step控制合法值集合、加touch-action: manipulation缓解移动端卡顿，并注意跨浏览器样式兼容性。

直接用 <input type="range"> 就能做出滑动输入条，但多数人卡在“能显示却拿不到准值”“拖着没反应”“移动端卡顿”这三类问题上——核心不是不会写标签，而是没处理好属性语义、事件时机和浏览器兼容性。

min/max/value 必须是数字字面量，别信字符串能自动转

写成 min="0" 和 max="100" 看似能跑，但隐患在 JS 里爆发：input.value 永远是字符串，input.value + 1 得到的是 "501" 而非 51。更麻烦的是，如果 min 或 max 里混了空格、单位或字母（比如 min="0px"），部分浏览器会静默忽略整个属性，导致滑块行为错乱。

• 务必确保引号内是纯数字：用 min="0" 没问题，但别写 min=" 0 " 或 min="0.0"（除非你真需要小数起点）
• value 必须落在 [min, max] 区间内，否则被浏览器忽略，滑块从 min 开始
• 默认 value 是 50（不是 0），不显式设 value 就等于埋雷

监听 input 事件，不是 change

绑定 onchange 或 addEventListener('change', ...) 后发现“拖动没反应，松手才更新”，这是最典型的误用。因为 change 只在用户释放滑块后触发一次，而 input 事件在每次值变化时都触发——包括拖拽中、键盘方向键操作、触屏滑动全过程。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 移动端尤其要注意：iOS Safari 旧版本可能不触发 input，稳妥做法是同时监听 input 和 change，用 event.type === 'input' 判断是否实时
• 想防抖？在 input 回调里用 requestAnimationFrame 或节流函数，别直接删事件
• 优先用 event.target.valueAsNumber 获取数字，比 Number(input.value) 更安全（但注意 IE 不支持）

step 不只是“步长”，它定义合法值集合

step 的真实作用是约束所有可选值必须满足 (value − min) % step === 0。这意味着 min="0" max="1" step="0.01" 允许的值是 0, 0.01, 0.02, ..., 0.99，但 1.0 不会被选中（因为 (1.0 − 0) % 0.01 !== 0）。

• 要支持小数精度，必须显式设 step，不写等价于 step="1"
• step="any" 允许任意浮点值，但旧版 Firefox 和 Safari 支持不稳定，慎用
• 推荐整数缩放法：比如要 0–100% 且精度 0.1%，用 min="0" max="1000" step="1"，JS 里再除以 1000，彻底避开浮点误差

移动端滑动卡顿？加 touch-action: manipulation

iOS Safari 和部分安卓 WebView 中，input[type="range"] 拖动延迟、跳变、甚至无响应，往往不是代码问题，而是浏览器为预留双指手势空间做的限制。

• 一行 CSS 即可缓解：input[type="range"] { touch-action: manipulation; }
• 这个声明告诉浏览器：“此元素只处理单点触摸拖动，不用预留缩放/滚动判断逻辑”
• 别全局加——如果页面本身依赖双指缩放（如地图、图表），会影响其他交互
• 额外补救：确保滑块有足够热区（最小尺寸建议 44×44px），并在 iOS 上禁用 user-scalable=no 干扰

最难搞的其实是跨浏览器样式：WebKit、Firefox、Safari 各自一套伪元素，appearance: none 在部分老浏览器里不生效，而强行 JS 模拟又破坏可访问性。真要深度定制，得接受冗长 CSS 和降级方案共存的事实。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！