jquery - プログレスバータイプの塗りつぶしを含むjQueryスライダーバー

Question

ハンドルをドラッグすると、スライダーバーがバーの片側を色で塗りつぶすように、jQuery UIを実装しようとしています。これは、プログレスバーのようなものです。誰かが私にこの問題に取り組む方法についてのヒントを教えてもらえますか？

前もって感謝します。

Answer 1

slider()私はおそらくドキュメントをもっと詳しく見るべきだったでしょう。これが、あなたが探していると思うことを行うためのはるかに簡単な方法です。すでにjQueryUIに組み込まれています。slider()以下の例は、上記でリンクしたjQueryドキュメントページから直接引用したものです。キーはrange、オプションに渡されるプロパティです。これに「min」の値を指定すると、スライダーが左側を色で塗りつぶします。

JavaScript：

$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider-range-min").slider("value"));
});

マークアップ：

<div id="slider-range-min"></div>