Ich benutzebootstrap slider in meinem Code. Ich kann den Schieberegler zum Laufen bringen. Meine Anforderung ist es, die Farbe des ausgewählten Abschnitts des Schiebereglers basierend auf dem ausgewählten Wert zu ändern. Ich kann die Farbe aber mit einer solchen Verzögerung ändern. Ich habe versucht, den ausgewählten Wert in einem anderen Eingabefeld anzuzeigen, was wiederum länger dauert. Ich bin nicht sicher, ob dies an einer verspäteten Antwort liegt oder der Code nicht stimmt. Das muss ganz einfach sein, aber ich stecke fest, da ich ein JS-Neuling bin. Jede Hilfe wäre sehr dankbar. Hier ist der Code, den ich verwendet habe. Danke im Voraus

DATEIEN ENTHALTEN:

<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>