如何根据百分比更改滑块颜色

// HTML部分
<input type="range" id="slider" min="0" max="100" value="50">

// JavaScript部分
var slider = document.getElementById("slider");

slider.addEventListener("input", function() {
  var value = slider.value;
  var ratio = value / 100;
  var color = interpolateColor(ratio, "red", "green");
  slider.style.background = color;
});

function interpolateColor(ratio, color1, color2) {
  var r = Math.round((1 - ratio) * parseInt(color1.substring(1, 3), 16) + ratio * parseInt(color2.substring(1, 3), 16));
  var g = Math.round((1 - ratio) * parseInt(color1.substring(3, 5), 16) + ratio * parseInt(color2.substring(3, 5), 16));
  var b = Math.round((1 - ratio) * parseInt(color1.substring(5, 7), 16) + ratio * parseInt(color2.substring(5, 7), 16));
  return "#" + r.toString(16) + g.toString(16) + b.toString(16);
}