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

Question

jQuery UIを実装して、バーの片側を色で塗りつぶして、ハンドルをドラッグすると、プログレスバーのように表示されます。誰も私にこの問題に近づく方法についてのヒントを教えてもらえますか？

ありがとうございます。

Answer 1

私はおそらくslider() documentationをより詳しく見ていたはずです。ここでは、私があなたが探していると思うことを行うもっと簡単な方法です。これはすでに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>