5

こんにちは、ブートストラップ スライダーで選択したセクションの色を変更するリンクの 1 つに示されているのと同じアプリケーションを使用していました。同じものを使っても先に進めません。私が間違いを犯した解決策を見て、教えてください。必要な .js および .css ファイルをシステムにダウンロードし、それらを html ページで参照しています。このスライダーは、フィードバックの種類に使用しています。1 から 10 までの 10 のオプションが続く質問はほとんどありません。ユーザーが 1 から 5 を選択すると、スライダーは「赤」(OK) を表示し、6 から 8 の間が「オレンジ」(良好) で、9 から 10 が表示されます。 「グリーン」（エクセレント） . 以下のコードを見つけて、助けてください。前もって感謝します

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-slider.js"></script>
<link href="js/bootstrap-slider.css" rel="stylesheet">
<link href="js/bootstrap.min.css" rel="stylesheet">

<style>
#score .slider-selection {
    background: yellow;
}
</style>

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

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

<input
    type="text"
    Id = "score"
    name="scoreSlide"
    data-provide="slider"
    data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" 
    data-slider-ticks-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]' 
    data-slider-min="1"
    data-slider-max="10"
    data-slider-step="1"
    data-slider-value="3",
    data-slider-tooltip="hide"
    /><br>
    <input type="text" ID="lbl" />
4

1 に答える 1