必须为WebKit、Firefox、Safari分别编写伪元素规则：Chrome/Edge用::-webkit-slider-runnable-track和::-webkit-slider-thumb，Firefox用::-moz-range-track和::-moz-range-thumb，均需设appearance: none并重置尺寸与背景，缺一不可。
不能只写一套 CSS 就指望所有浏览器都生效——WebKit、Firefox、Safari 各自认不同的伪元素，漏掉任意一套，对应浏览器里滑块就回退到丑陋原生样式。
为什么直接设 width/background 没用
因为浏览器把 input[type="range"] 的轨道（track）和滑钮（thumb）当成系统控件渲染，通用 CSS 属性对它们基本无效。你看到的“能调粗细”，其实是浏览器默认渲染的副作用，不是可控样式。
- 必须先加
appearance: none（带-webkit-、-moz-前缀）禁用原生外观，否则后续伪元素根本不起作用 - Safari 对
::-webkit-slider-thumb支持不稳定，某些版本下border-radius失效或位置偏移 - Firefox 中
::track默认是 inline 元素，不设display: block就调不了尺寸
三套伪元素规则怎么写才不漏
缺一不可，顺序建议按实际覆盖优先级排：WebKit → Mozilla → 实验性标准。别指望 ::thumb 能通吃。
- Chrome/Edge/Safari（部分）：
::-webkit-slider-thumb+::-webkit-slider-runnable-track - Firefox：
::-moz-range-thumb+::-moz-range-track（注意不是::thumb） - 实验性通用写法（支持度低）：
::thumb/::track，目前仅 Safari 15.4+ 有限支持 - IE 完全不支持这些伪类，
input[type="range"]在 IE10–11 中只能用默认样式或 JS 模拟
进度条填充为什么不能靠 background-gradient
原生 input[type="range"] 没有“已滑动区域”的 DOM 结构，所谓“蓝色填充左侧”必须手动实现。各浏览器对 background-position 解析不一致，thumb 居中时填充起点经常偏移。
立即学习“前端免费学习笔记（深入）”；
- 主流做法：HTML 里保留原生
input（负责事件和值），外层包一个<div class="range-wrapper"> <li>JS 监听 <code>input事件，读取value、min、max，算出百分比：(value - min) / (max - min) * 100 - 把这个百分比赋给内部填充条的
width或flex-basis，注意处理边界（0%和100%） - 避免用
transform: scaleX()做填充——缩放会导致thumb错位，尤其在高 DPI 屏幕上
真正麻烦的不是写几行 CSS，而是得同时扛住三套伪元素规则、JS 数值转换、移动端 touch 行为、以及 Safari 那些神出鬼没的渲染 bug。稍一疏忽，iOS 上松手就跳回原位，或者 Firefox 里轨道突然塌陷成一条线——这些都不是样式问题，是底层交互没兜住。
