Question

您好我使用的是在Change color of selected section in bootstrap slider链接中演示的相同应用程序。即使我使用相同的，我也无法继续。你能否看到并告诉我解决错误的方法。我已经将必要的.js和.css文件下载到我的系统中并在我的html页面中引用它们。这个滑块我用于反馈类型。从1到10的10个选项将会出现几个问题。当用户选择1到5时，滑块应显示＆＃34;红色＆＃34;颜色（OK），当它在6到8之间时＃34;橙＆＃34; （好）和9到10是节目＆＃34;绿色＆＃34; （优秀）。请找到我的以下代码并帮助我。提前致谢

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

Answer 1

以下代码执行您的要求。但是，我不认为浅蓝色手柄/按钮看起来很棒。

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

如何更改引导滑块中所选部分的颜色

1 个答案: