不行。伪元素::before和::after无法响应鼠标事件，因不参与事件流；拖拽手柄必须用真实dom元素（如div或span），配合pointer-events:none禁用原生input滑块，并通过js计算更新位置。
用 ::before 和 ::after 做进度条拖拽点行不行？
不行。伪元素不能响应鼠标事件，::before 和 ::after 渲染在主元素“之上”，但不参与事件流——你点不到它，addEventListener('mousedown', ...) 完全捕获不到。很多同学试了发现拖不动，就是卡在这儿。
真正能交互的节点必须是真实 DOM 元素，比如一个 <div class="progress-thumb"></div>，再用 CSS 定位覆盖在 <input type="range"> 上面。
常见错误现象：
– 进度条滑块视觉上“有圆点”，但鼠标悬停无 cursor: pointer
– 点击后没反应，控制台也无报错
– 移动时位置跳变，或始终卡在起点
- 把拖拽手柄做成独立
<span></span>或<button></button>，挂载在<input type="range">外层容器里 - 用
pointer-events: none关掉原生<input>的滑块（避免双滑块干扰） - 通过监听
input事件读取value，再用 JS 计算并更新手柄left百分比位置
input[type="range"] 的 thumb 伪类怎么定制？
Chrome/Edge 支持 ::-webkit-slider-thumb，Firefox 是 ::-moz-range-thumb，Safari 15.4+ 才支持 ::-webkit-slider-thumb，旧版 Safari 只能降级为覆盖式手柄。别指望一套 CSS 通吃。
立即学习“前端免费学习笔记（深入）”；
使用场景：仅需基础样式微调（颜色、大小、圆角），且兼容性要求不高（比如内部管理后台）；若要自定义阴影、SVG 图标、hover 动效，就得放弃伪类，走真实 DOM 路线。
-
::-webkit-slider-thumb必须配合-webkit-appearance: none才生效 - Firefox 下
::-moz-range-thumb不支持transform，缩放会失真 - Safari 对
background-image在 thumb 上的支持不稳定，建议用纯色 +border-radius - 所有浏览器都不允许给 thumb 添加
z-index，层级由渲染顺序决定，无法盖过其他元素
进度条手柄跟随音频时间变化时，为什么老是“滞后”或“抖动”？
核心原因是用 timeupdate 频繁触发 UI 更新，但没做节流，加上 CSS 定位计算和重排（layout）开销叠加，导致视觉卡顿。尤其在低端 Android 设备上，currentTime 每秒上报 4–10 次，每次都去算 left = (currentTime / duration) * 100 + '%'，很快积压。
性能影响：未节流时，Chrome DevTools 的 Performance 面板能看到大量 Layout → Paint → Composite，FPS 掉到 20 以下。
- 用
requestAnimationFrame包裹位置更新逻辑，让浏览器决定何时绘制 - 只在
currentTime变化超过 0.1 秒时才更新 UI，避免无效重绘 - 手柄元素用
position: absolute+transform: translateX(...)替代left，开启硬件加速 - 确保父容器有
will-change: transform（仅对频繁移动的元素启用）
移动端 touch 事件对接进度条时，为什么松手后位置“弹回”？
因为没阻止原生 <input type="range"> 的默认行为。iOS Safari 和部分安卓 WebView 在 touchend 后会自动触发一次 change，把值“订正”回最近一次合法 step 步长，而你的 JS 手柄可能刚拖到非整数位置（比如 123.7 秒），就被截断成 124 秒，看起来像弹了一下。
容易踩的坑：
– 只监听 touchstart/move/end，却忘了禁用原生 input 的响应
– step 设为 any 后，某些安卓机型仍强制四舍五入
- 在
touchstart时立刻调用event.preventDefault()，并给<input>加pointer-events: none - 用
input.valueAsNumber代替input.value，避免字符串解析误差 - 手动绑定
touchmove到 document，防止手指移出容器后中断拖拽 - 松手后主动调用
audio.currentTime = calculatedTime，而不是依赖 input 的 value
最麻烦的其实是 iOS 上 input[type="range"] 的 touch 响应延迟 —— 它默认等 touchend 才触发，得靠 touchmove + preventDefault 绕过去。这点很容易被忽略，直到真机测试才发现拖起来“黏糊糊”。
