如何 - VoidCC

您好我使用这是在链接Change color of selected section in bootstrap slider的一个表现出相同的应用程序，以更改所选部分的颜色引导滑块。即使我使用相同的，我不能够继续。你可以请参阅，让我知道我做了错误的解决方案。我已经下载必要的.js和.css文件到我的系统，并在我的html页面引用它们。这是我使用的反馈类型的滑块。当用户选择1至5，滑动器应该显示“红”颜色（OK）几个问题将与来自110个选择遵循至10，当其在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" />

来源

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

如何

回答

相关问题