ブートストラップスライダーで選択したセクションの色を変更する方法

こんにちは私はリンクChange color of selected section in bootstrap sliderの1つで実証された同じアプリケーションを使用していました。私は同じを使用した後でも、私は続行することができません。あなたは私が間違いを犯した解決策を見て、私に知らせてくれますか？私は必要な.jsと.cssファイルを自分のシステムにダウンロードし、HTMLページでそれらを参照しています。このスライダーはフィードバックの種類として使用しています。ユーザーが1から5までの10個のオプションを選択すると、6から8の「オレンジ」（グッド）と9から10の間が「赤」の色（OK）で表示されます。 "グリーン"（優秀）。私の下のコードを見つけて助けてください。事前に感謝しますブートストラップスライダーで選択したセクションの色を変更する方法

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

出典

2016-11-14 Sid

JSFiddle（または同様の）リンクを提供できますか？ – tugce

次のコードは、あなたが尋ねたことを行います。しかし、私はそれがライトブルーのハンドル/ボタンで素晴らしいとは思わない。

<html> 
<head> 
<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"> 
</head> 
<body> 
<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" 
/> 
<input type="text" id="lbl" /> 
<script> 
var r = $('#score').slider() 
    .on('slideStop', function(ev){ 
    var value = r.getValue(); 
     if(value >= 1 && value <= 5){ 
      $('.slider-selection').css('background', 'red'); 
     } 
     else if(value > 5 && value <= 8) { 
      $('.slider-selection').css('background', 'orange'); 
     } 
     else if(value > 8 && value <= 10) { 
      $('.slider-selection').css('background', 'green'); 
     } 
     $('#lbl').val = value; 
    }) 
    .data('slider'); 
</script> 
</body> 
</html>

出典

2016-11-14 05:51:42 varlogtim

ブートストラップスライダーで選択したセクションの色を変更する方法

答えて

関連する問題