ブートストラップスライダで選択したセクションの色を変更してください

Question

私のコードにbootstrap sliderを使用しています。私はスライダを動作させることができます。私の要件は、選択した値に基づいてスライダの選択したセクションの色を変更することです。私はそのような遅れで色を変えることができます。別の入力ボックスで選択した値を表示しようとしましたが、もう一度反映するのに時間がかかります。私はこれが遅れた応答のためにあるかどうかわからない/コードが正しくない。これは非常にシンプルでなければなりませんが、私はJSの初心者のように立ち往生しています。どんな助けも高く評価されます。ここに私が使ったコードがあります。前もって感謝します！

FILESが含まれています：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
    <script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script> 
    <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet"> 
    <link href="http://seiyria.com/bootstrap-slider/dependencies/css/bootstrap.min.css" rel="stylesheet"> 

HTML

<input 
type="text" 
Id = "score" 
name="scoreSlide" 
data-provide="slider" 
data-slider-ticks="[1, 2, 3]" 
data-slider-ticks-labels='["short", "medium", "long"]' 
data-slider-min="1" 
data-slider-max="3" 
data-slider-step="1" 
data-slider-value="3" 
data-slider-tooltip="hide" 
/> 
<input type="text" ID="lbl" /> 

JAVA SCRIPT/jQueryの

<script> 
var RGBChange = function() { 
if(r.getValue() ==1){ 
$('.slider-selection').css('background', 'red'); 
document.getElementById("lbl").value = r.getValue(); 
} 
else{ 
$('.slider-selection').css('background', 'green'); 
document.getElementById("lbl").value = r.getValue(); 
} 

}; 

var r = $('#score').slider() 
    .on('slide', RGBChange) 
    .data('slider'); 

</script> 

Answer 1

ではなく、このようなスライドのslideStartを使用してみてください：

var r = $('#score').slider() 
.on('slideStart', RGBChange) 
.data('slider');