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

Question

所以我为我的滑块创建了一些自定义颜色类，它运行良好...这就是它的外观：

我只是创建了以下类:

.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 = 绿色。

我该怎么做？

Answer 1

您可以尝试使用 "update" 的事件回调，如下所示：

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);
}

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

How do I change the color on my noUiSliders depending on the value it currently is at?

javascript

jquery

nouislider