如何用CSS创建一个带有方框阴影和动态颜色的曲线滑块单元？

<div id="slider"></div>

#slider {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  border-radius: 5px;
  position: relative;
}

#slider::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

#slider::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: linear-gradient(to right, red, yellow, green);
  border-radius: 50%;
  opacity: 0.5;
}

var slider = document.getElementById("slider");

slider.addEventListener("mousedown", function(event) {
  var startX = event.clientX;
  var startLeft = slider.offsetLeft;

  document.addEventListener("mousemove", moveSlider);
  document.addEventListener("mouseup", stopSlider);

  function moveSlider(event) {
    var newX = startLeft + event.clientX - startX;
    var maxOffset = slider.offsetWidth - slider.querySelector("::before").offsetWidth;

    if (newX >= 0 && newX <= maxOffset) {
      slider.style.left = newX + "px";
      updateColor(newX / maxOffset);
    }
  }

  function stopSlider() {
    document.removeEventListener("mousemove", moveSlider);
    document.removeEventListener("mouseup", stopSlider);
  }

  function updateColor(percentage) {
    var colors = ["red", "yellow", "green"];
    var colorIndex = Math.floor(percentage * (colors.length - 1));
    var newColor = colors[colorIndex];

    slider.querySelector("::before").style.backgroundColor = newColor;
  }
});