Question

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

我不知道如何处理这个，感谢任何帮助。

Answer 1

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

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 );
    }
});

动态更改jQuery UI滑块栏的颜色

1 个答案: