Javascript 如何根据noUiSliders当前的值更改其颜色？

因此，我为我的滑块创建了一些自定义颜色类，效果很好……这就是它的外观：

我所做的只是创建了以下类：

.red .noUi-connect {
  background: #c0392b;
}

.orange .noUi-connect {
  background: #2980b9;
}

.green .noUi-connect {
  background: #27ae60;
}

并将其应用于我的div，如下所示：

<div id="slider-speed" class="slider red"></div>
<div id="slider-speed" class="slider orange"></div>
<div id="slider-speed" class="slider green"></div>

但是，我想做的是，每当用户向左或向右移动滑块时，滑块的颜色都会根据值发生变化

所以1-3=红色，4-6=橙色，7-10=绿色

---

如何执行此操作？

您可以尝试使用事件回调进行“更新”，如下所示：

slider.noUiSlider.on('update', function(values, handle){
  updateColorClass(document.getElementById('slider-speed'), values[handle]);
});

function updateColorClass(element, value) {
  var color;
  if (value < 4) { 
    color = 'red';
  } else if (value < 7) { 
    color = 'orange';
  } else {
    color = 'green';
  }

  element.classList.remove("red", "orange", "green");
  element.classList.add(color);
}

slider.noUiSlider.on（'update'，函数（值，句柄）{
updateColorClass（document.getElementById（'slider-speed'），值[handle]）；
});
函数updateColorClass（元素、值）{
颜色变异；
如果（值<4）{
颜色=红色；
}如果（值<7）{
颜色=‘橙色’；
}否则{
颜色='绿色'；
}
元素。类列表。删除（“红色”、“橙色”、“绿色”）；
元素。类列表。添加（颜色）；
}

这是一个很好的开始。问题是它一直在添加类。一旦添加了一个新的颜色类，我如何删除其他颜色类？没关系，我已经找到了答案并更新了你的答案。谢谢