現在の値に応じて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> 

スライダを左右に動かすと、値に基づいてスライダの色が変わります。

So 1-3 =赤、4-6 =オレンジ、7-10 =緑。

どうすればよいですか？

Answer 1

あなたは、このような「更新」のイベントコールバックを使用して試みることができる：

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