如何根据范围滑动条的当前百分比动态调整轨道颜色并实现渐变效果

核心实现思路 #

通过CSS变量 + JS动态更新的方式实现，逻辑简单且兼容性覆盖绝大多数主流浏览器：

• 用CSS自定义变量存储滑块当前的进度百分比
• 滑动条轨道背景拼接两部分：前半段是蓝到绿的渐变，宽度等于当前进度百分比，后半段保留原有的#e9eefc底色
• 监听滑块的输入事件，实时更新进度百分比对应的CSS变量值即可实现效果同步

完整代码实现 #

修改后的CSS代码 #

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  /* 增加CSS变量存储当前进度，默认0% */
  --slider-value: 0%;
  /* webkit内核下的轨道背景实现：渐变到当前进度位置，剩下部分保留原底色 */
  background: linear-gradient(to right, #2563eb, #10b981) 0 / var(--slider-value) 100% no-repeat, #e9eefc;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

/* webkit内核滑块样式 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #313a46;
  cursor: pointer;
}

/* 火狐浏览器已选轨道单独设置渐变 */
.slider::-moz-range-progress {
  background: linear-gradient(to right, #2563eb, #10b981);
  height: 25px;
}

/* 火狐浏览器未选轨道保留原底色 */
.slider::-moz-range-track {
  background: #e9eefc;
  height: 25px;
}

/* 火狐内核滑块样式 */
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

HTML代码（保持原有结构不变） #

<div class="row">
    <div class="mb-3 slidecontainer">
        <input class="slider" type="range" min="0" max="100" step="5">
    </div>
</div>

新增JS监听代码 #

const slider = document.querySelector('.slider');
// 初始化设置默认进度
slider.style.setProperty('--slider-value', `${slider.value}%`);
// 监听滑块拖动事件，实时更新进度变量
slider.addEventListener('input', () => {
  const percent = slider.value + '%';
  slider.style.setProperty('--slider-value', percent);
});

效果说明 #

• 进度低时已选区间为蓝色，随着进度升高逐渐过渡为绿色，完全匹配需求的渐变效果
• 兼容Chrome、Edge、Safari、Firefox等主流浏览器
• 代码改动量小，性能开销极低，拖动过程无卡顿
• 如果页面有多个滑动条，将JS代码改为遍历所有.slider元素绑定事件即可

内容的提问来源于stack exchange，提问作者NewProgrammer