javascript - 範囲と3つの異なる背景色を持つjQueryスライダー

Question

私はこのようなことを達成したいと思います:

X要素の中から、「OK」の数、「部分的にOK」の数、「OKではない」の数を選びたいと思います。明らかに、3 つの範囲は重ね合わせることができず、合計は常に X になります。

標準の jQuery UI スライダーから始めようとしましたが、メインの背景が独特なので、緑と赤を一緒に使用することはできません。

すでにこれを行うプラグインはありますか? または、標準の jQuery プラグインを使用する最も簡単な方法はどれですか?

Answer 1

デモでわかるように、jQuery UI スライダーは値を提供します。

$( "#slider-range" ).slider({
  slide: function( event, ui ) {
    /* here, you can play with it */
  }
});

スライダーの背景色を緑に設定し、中央部分の背景色を黄色に設定しdiv、スライダーの右側に幅を動的に調整して追加し、右から左に伸びるようにします

$( "#slider-range" ).slider({
  slide: function( event, ui ) {
    $('#YourDiv').css('width', ui.values[1]); /* obviously, you have to multiply the value of the slider by something to fit your design */
  }
});

jQuery UI デモでは、div は次のようなスタイルになります。

#YourDiv {
    float: right;
    height: 100%;
    background: red;
    width: 50px; /* this would be dynamic */
    border-radius: 0 4px 4px 0;
}

ちょっとした Fiddle DEMOを作りました