实现Range Input背景色从红到黄再到绿的渐变效果

没问题！要让你的滑块从左到右背景平滑过渡为红→黄→绿，我们可以结合JavaScript监听滑块的拖动事件，根据当前滑块值动态计算并更新轨道的背景色。下面是具体的实现方案和修改后的完整代码：

实现思路 #

• 用CSS变量统一管理滑块轨道的背景色，初始值设为红色
• 监听滑块的input事件，实时获取当前值（范围0-100）
• 根据滑块位置计算RGB颜色：
  • 当值在0-50时：红色保持255，绿色从0递增到255（红→黄）
  • 当值在50-100时：绿色保持255，红色从255递减到0（黄→绿）
  • 蓝色始终设为0，避免干扰渐变效果
• 通过JavaScript动态更新CSS变量，实现全浏览器的轨道颜色同步变化

修改后的完整代码 #

<table>
  <tr>
    <td colspan="3">
      <input type="range" name="rangeInput" value="0" min="0" max="100">
    </td>
  </tr>
  <tr>
    <td style="text-align:left">red</td>
    <td style="text-align:center">yellow</td>
    <td style="text-align:right">green</td>
  </tr>
</table>

input[type=range] {
  -webkit-appearance: none;
  width: 200px;
  margin: 13.8px 0;
  /* 定义CSS变量，初始红色 */
  --track-color: rgb(255, 0, 0);
}
input[type=range]:focus {
  outline: none;
}

/* WebKit内核浏览器轨道样式 */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: var(--track-color);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--track-color);
}

/* Firefox浏览器轨道样式 */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: var(--track-color);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* IE/Edge浏览器轨道样式 */
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: var(--track-color);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: var(--track-color);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: var(--track-color);
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--track-color);
}

const rangeInput = document.querySelector('input[type="range"]');

// 根据滑块值计算对应RGB颜色的函数
function getTrackColor(value) {
  const numValue = parseInt(value);
  let r, g;
  
  if (numValue <= 50) {
    // 红→黄：红色固定255，绿色从0递增到255
    r = 255;
    g = Math.floor((numValue / 50) * 255);
  } else {
    // 黄→绿：绿色固定255，红色从255递减到0
    g = 255;
    r = Math.floor(255 - ((numValue - 50) / 50) * 255);
  }
  
  return `rgb(${r}, ${g}, 0)`;
}

// 初始化滑块轨道颜色
rangeInput.style.setProperty('--track-color', getTrackColor(rangeInput.value));

// 监听滑块拖动事件，实时更新颜色
rangeInput.addEventListener('input', function() {
  const currentColor = getTrackColor(this.value);
  this.style.setProperty('--track-color', currentColor);
});

现在拖动滑块，你就能看到背景色从红色开始，逐渐过渡到黄色，最终变为绿色的平滑效果啦！

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