原生 range 输入框无法用纯 CSS 渐变动态填充已选区域，必须通过 JS 计算滑块百分比并控制遮罩层宽度实现；三段色等业务逻辑需 JS 判断切换样式，且移动端需用 requestAnimationFrame 避免重排跳变。
原生 input[type="range"] 无法直接用 CSS 渐变填充已选区域
浏览器不提供 ::-webkit-slider-runnable-track 或 ::track 的“已滑动部分”选择器，background: linear-gradient() 只能作用于整个轨道，不能随滑块位置动态裁剪左侧/右侧。你看到的“渐变进度条”效果，99% 是靠额外 DOM 层 + JS 计算实现的，不是纯 CSS。
linear-gradient() 只能用于轨道整体，别指望它自动响应滑块值
你可以给轨道加渐变背景，但它不会“停在滑块位置”，而是铺满整条轨道：
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(to right, #4CAF50, #FFC107, #F44336);
}这只会让轨道从绿→黄→红横向铺开，和滑块当前值完全无关。常见误操作是以为加了这个就等于实现了“三段色进度条”，其实只是静态背景。
- Firefox 中
::track不支持background-image渐变（仅部分新版支持，且行为不一致） - Safari 对
linear-gradient()在伪元素中的渲染有偏移或锯齿问题 - 渐变方向写错（如漏掉
to right或写成right）会导致整个声明失效，回退到默认灰轨
真要实现“滑到哪，渐变填到哪”，必须用 JS 动态控制遮罩层宽度
核心是把视觉拆成三层：底层固定三色条 → 中层白色半透遮罩 → 顶层透明滑块。JS 监听 input 事件，实时算出百分比，更新遮罩层 width：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 读取
input.value、input.min、input.max - 计算：
(value - min) / (max - min) * 100 + '%' - 把这个值赋给遮罩
<div class="slider-fill">的style.width - 注意边界：当值为
min时设width: 0%，为max时设100%，避免小数导致视觉跳变
不要用 transform: scaleX() 模拟填充——缩放会干扰 thumb 定位，尤其在 iOS Safari 和高 DPI 屏幕上容易错位。
三段色逻辑得自己分区间，CSS 不懂业务语义
比如“0–30% 绿色，30–70% 黄色，70–100% 红色”，这个划分必须由 JS 判断并切换遮罩层的背景色，或控制三个底层色块的显隐：
- 用
if (percent <= 30)切换.slider-fill的background-color - 或更灵活：用三个
<span>并排，分别设宽 30% / 40% / 30%，再用一个遮罩盖在上面统一裁切 - CSS 本身没有“根据 input 值自动切换 class”的能力，
:has()尚未在 range 上可靠支持
最易被忽略的一点：移动端 touch 事件松手后滑块跳回，常是因为遮罩层 DOM 更新触发了重排，导致 input 失去焦点；建议所有样式变更用 requestAnimationFrame 批量处理，避免连续强制同步布局。
