javascript - 动态更改 jQuery UI 滑动条段的颜色

Question

我有一个水平的 jQuery UI 滑块栏，我想动态更改该栏的多个部分的颜色，以表明滑块的这些部分有什么特别之处。理想情况下，颜色也会延伸到条形下方，因此即使滑块手柄位于彩色段的顶部，也可以看到它。

我不知道如何解决这个问题，任何帮助表示赞赏。

Answer 1

您需要做的就是制作一个滑块 div，然后将 div 嵌入其中，每个 div 都有不同的背景颜色（使用 CSS）。然后要动态改变这些颜色，你所要做的就是改变每个 div 的 css 使用$("#id").css("backgroundColor", "color");.

JSFiddle：http: //jsfiddle.net/6NcvL/1/

HTML

<div id="slider">
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
</div>
<input id="value" value="0" readonly />

CSS

#slider {
    height: 10px;
    width: 300px;
}
#red {
    height: 10px;
    width: 100px;
    background-color: red;
    float: left;
}
#green {
    height: 10px;
    width: 100px;
    background-color: green;
    float: left;
}
#blue {
    height: 10px;
    width: 100px;
    background-color: blue;
    float: left;
}
#value {
    padding-top: 30px;
    border: 0;
}

jQuery

$("#slider").slider({
    slide: function(event, ui) {
        $( "#value" ).val( ui.value );
    }
});