如何在平滑滑块的开始/结束位置更改SVG的颜色

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect id="myRect" width="200" height="200" fill="blue" />
</svg>

#myRect {
  transition: fill 0.5s; /* 定义颜色过渡的动画效果 */
}

const slider = document.getElementById('slider');
const rect = document.getElementById('myRect');

slider.addEventListener('input', function() {
  const value = slider.value;
  const color = `hsl(${value}, 100%, 50%)`; // 使用HSL颜色模式，根据滑块值计算颜色

  rect.style.fill = color; // 修改SVG矩形的填充颜色
});