range滑块样式需分别适配WebKit、Gecko并配合JS：必须用对应伪类设置track/thumbnail，appearance: none是前提；Firefox不支持track圆角和background-image；Safari需touch-action+appearance防卡顿。
range输入框的track为什么总不听使唤
直接给 input[type="range"] 设 background 或 border 没用——浏览器把滑块轨道（track）和拖柄（thumb）当成独立伪元素处理，原生样式优先级极高。你写的规则若没命中对应伪类，就等于白写。
必须通过 ::-webkit-slider-runnable-track（Chrome/Safari）、::-moz-range-track（Firefox）分别控制，且 Firefox 不支持 border-radius 在 track 上生效。
- Chrome/Safari 中，
height必须设在 track 伪元素上，而非input本身；设在 input 上只影响 thumb 垂直定位 - Firefox 的
::-moz-range-track不响应background-image，只能用纯色或渐变 - 所有浏览器中，
appearance: none是前提，否则伪元素选择器压根不生效
如何让range滑块轨道看起来像设计稿
关键不是“填满颜色”，而是控制 track 的高度、圆角、渐变断点和已选区/未选区区分。Tailwind 用户别指望 h-2 这类类能起效——它作用在 input 标签上，而真正要调高的其实是 track。
- Chrome/Safari：
input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #3b82f6 0%, #3b82f6 50%, #e5e7eb 50%, #e5e7eb 100%); } - Firefox：
input::-moz-range-track { height: 6px; background: #e5e7eb; border-radius: 0; /* 强制失效 */ } - 已选区（左侧）需 JS 配合：不能靠 CSS :checked，得用
input.addEventListener('input', ...)动态更新自定义属性，再用background: linear-gradient(... var(--progress))
thumb拖柄点击热区太小怎么办
默认 thumb 宽高约 12–16px，手指在移动端几乎点不准。放大它不能只加 width/height，否则会破坏居中和拖动逻辑——必须同时调整 margin 和 transform 补偿偏移。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari：
input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #3b82f6; cursor: pointer; } - Firefox：
input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #3b82f6; border: none; cursor: pointer; } - 注意
margin-top: -9px是为了让 24px 圆形 thumb 垂直居中于 6px 高 track（24÷2 − 6÷2 = 9），数值必须严格匹配
移动端 range 滑动卡顿或跳变
不是性能问题，是 Safari 对 input[type="range"] 的 touch 事件处理有延迟，且默认开启 “缩放” 行为，导致手指一碰就触发页面缩放。Chrome Android 则可能因硬件加速未启用而掉帧。
- 强制禁用缩放：
input[type="range"] { -webkit-user-select: none; touch-action: pan-y; } - Safari 必须加：
input[type="range"] { -webkit-appearance: none; }否则 touch-action 不生效 - 别用
transition动画 track 背景——Safari 下会严重卡顿；改用 JS requestAnimationFrame 控制进度条渲染 - 如果用了自定义 tooltip 显示当前值，务必加
pointer-events: none到 tooltip 元素，否则会拦截滑块 touch 事件
range 输入框的样式控制本质是「三套规则并行维护」：WebKit、Gecko、以及 JS 补位逻辑。最易被忽略的是 Firefox 的 track 圆角失效和 Safari 的 touch-action 依赖 appearance 重置——漏掉任一环，视觉或交互就会断层。
