javascript - 更改 Bootstrap slider 中选定部分的颜色

Question

我正在使用bootstrap slider在我的代码中。我能够让 slider 工作。我的要求是根据所选值更改 slider 所选部分的颜色。我可以改变颜色，但有这样的延迟。我尝试显示在另一个输入框中选择的值，这又需要更长的时间来反射(reflect)。我不确定这是否是因为延迟响应/代码不正确。这一定很简单，但我被困住了，因为我是一个 JS 新手。任何帮助将不胜感激。这是我使用过的代码。提前致谢!

包含的文件:

<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 脚本/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 而不是 Slide，如下所示:

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