我可以使用不同的图像为每个自定义的点我的平滑滑块？

<input type="range" id="slider">

#slider {
  background-image: url('path/to/image.png');
  /* 其他样式属性 */
}

var slider = document.getElementById('slider');
slider.addEventListener('input', function() {
  var value = slider.value;
  // 根据值的不同，设置不同的图像
  if (value < 25) {
    slider.style.backgroundImage = "url('path/to/image1.png')";
  } else if (value < 50) {
    slider.style.backgroundImage = "url('path/to/image2.png')";
  } else if (value < 75) {
    slider.style.backgroundImage = "url('path/to/image3.png')";
  } else {
    slider.style.backgroundImage = "url('path/to/image4.png')";
  }
});