可用input[type="range"]的::before伪元素配合css变量动态控制左侧填充色。通过js将滑动值同步为--range-value变量，webkit用::before+width实现填充，firefox用linear-gradient控制渐变断点，thumb可借filter或hsl动态变色。
可以用 input[type="range] 的 ::before 伪元素配合 CSS 自定义变量，动态控制滑块左侧填充色的长度和颜色。核心是把滑动值映射为 CSS 变量，在伪元素中用 linear-gradient 或 width 实现视觉填充。
1. 基础结构：绑定 input 值到 CSS 变量
HTML 中保留原生 range 输入框，不加额外 wrapper；JS 监听 input 事件，将当前值（0–100）同步写入一个 CSS 变量，比如 --range-value：
- 假设 range 的
min="0"、max="100"、value="50" - JS 中用
element.style.setProperty('--range-value', value)实时更新 - 这样 CSS 就能通过
var(--range-value)拿到实时数值
2. 利用 ::before 实现左侧填充条
给 range 添加 class（如 .range-filled），然后用伪元素覆盖在轨道上：
- 设置
input[type="range"]::-webkit-slider-runnable-track为透明或浅灰背景 - 用
.range-filled::-webkit-slider-runnable-track::before创建填充层（注意：必须用::before伪元素套在 track 上，不能直接对 input 加） - 该伪元素宽度设为
calc(var(--range-value) * 1%);，高度与 track 一致，背景色自定义 - 需设
content: '';、position: absolute;、left: 0;、top: 0;并覆盖 track 区域
3. 兼容性处理（WebKit + Firefox）
Firefox 使用 ::range-track，且不支持伪元素嵌套，所以需分开写：
- WebKit（Chrome/Safari）：用
::-webkit-slider-runnable-track::before+width填充 - Firefox：改用
background: linear-gradient，方向设为90deg，起点用calc((100 - var(--range-value)) * 1%)控制渐变断点 - 例如：
background: linear-gradient(90deg, #4a6fa5 0%, #4a6fa5 var(--range-value), #e0e0e0 var(--range-value), #e0e0e0 100%);
4. 滑块（thumb）跟随填充色变化（可选）
如果希望滑块颜色也随值变化（如低值偏蓝、高值偏红），可用：
- CSS 中用
filter: hue-rotate(calc(var(--range-value) * 1.8deg));（0–100 → 0–180°） - 或 JS 动态设
style.setProperty('--thumb-color', `hsl(${value}, 70%, 60%)`)，再在::-webkit-slider-thumb中引用 - 注意 thumb 本身不支持伪元素，颜色/形状需直接作用于 thumb 本身
关键在于把 range 的数值变成可被 CSS 消费的变量，并选择合适的技术路径（width / gradient / filter）实现响应式视觉反馈。不需要框架，纯 HTML+CSS+JS 即可完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
