javascript - jQuery UI スライダー バーのセグメントの色を動的に変更する

Question

水平方向の jQuery UI スライダー バーがあり、そのバーの複数のセグメントの色を動的に変更して、スライダーのこれらのセグメントに何か特別なものがあることを示したいと考えています。理想的には、色がバーの下にも広がるようにして、スライダー ハンドルが色付きのセグメントの上にある場合でも表示できるようにします。

これにアプローチする方法がわかりません。助けていただければ幸いです。

Answer 1

あなたがする必要があるのは、スライダー 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 );
    }
});