因此,我为滑块创建了一些自定义颜色类,并且效果很好...这是它的外观:
我所做的只是创建了以下类:
.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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句