如何制作带渐变填充效果的HTML滑块？

不用复杂JS就能搞定，下面是兼容主流浏览器的完整方案：

核心思路 #

原生Range滑块的轨道样式自定义需要区分浏览器内核，我们通过CSS变量+极简JS动态计算滑块当前值的百分比，以此控制渐变填充的范围，不用复杂逻辑就能实现跟随滑块移动的渐变效果。

完整代码 #

HTML

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
</div>

CSS

.slidecontainer {
  width: 80%;
  margin: 20px auto;
  position: relative;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  border-radius: 5px;
  outline: none;
  opacity: 0.8;
  transition: opacity .2s;
  background: transparent; /* 隐藏滑块默认背景，让轨道渐变显示 */
}

.slider:hover {
  opacity: 1;
}

/* Firefox 轨道样式 */
.slider::-moz-range-track {
  height: 25px;
  border-radius: 5px;
  background: linear-gradient(to right, #1e90ff var(--fill-percent), #d3d3d3 var(--fill-percent));
}

/* Webkit 浏览器轨道样式（Chrome、Safari等） */
.slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 25px;
  border-radius: 5px;
  background: linear-gradient(to right, #1e90ff var(--fill-percent), #d3d3d3 var(--fill-percent));
}

/* 滑块样式 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: blue;
  cursor: pointer;
  margin-top: 0;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: blue;
  cursor: pointer;
  border: none;
}

JS（极简，仅用于计算百分比）

const slider = document.getElementById('myRange');

// 页面加载时初始化填充
updateFill();

// 滑块移动时更新填充
slider.addEventListener('input', updateFill);

function updateFill() {
  const value = Number(slider.value);
  const min = Number(slider.min);
  const max = Number(slider.max);
  // 计算当前值占总范围的百分比
  const percent = ((value - min) / (max - min)) * 100;
  // 更新CSS变量，控制渐变分割点
  slider.style.setProperty('--fill-percent', `${percent}%`);
}

使用说明 #

把上面的代码替换你原来的代码即可，滑块移动时，左侧会显示蓝色渐变填充，右侧保持灰色背景。如果需要修改渐变颜色，直接修改CSS里的#1e90ff（填充色）和#d3d3d3（底色）就行。

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