プログレスバータイプの塗りつぶしを備えた jQuery スライダー バー

Question

進行状況バーのように、ハンドルをドラッグするとスライダー バーの片側が色で塗りつぶされるように、jQuery UI を実装しようとしています。誰かがこの問題にどのようにアプローチできるかについてヒントを教えてもらえますか?

よろしくお願いします。

Answer 1

たぶん見るべきだった slider() ドキュメンテーション もっと近くで。ここでは、あなたが探していると思われることを行うためのはるかに簡単な方法を紹介します。これはすでに jQuery UI に組み込まれています。以下の例は、jQuery から直接取得したものです。 slider() 上にリンクしたドキュメントページ。鍵となるのは、 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>