javascript - Javaで動的価格帯スライダーを作成する

Question

makemytrip.com のような動的な価格帯スライダーを作成したいと考えています。製品価格に基づいた最小価格と最大価格の値があります。たとえば、製品の最低価格が $50 で最高価格が $200 の場合、スライダーで使用可能な範囲を $50 で開始し、$200 で終了できますか?

Answer 1

この機能を実現するには、jQuery スライダーを使用します。デモはこちら

これには次のコードを使用する必要があります

 $(function () {
   $("#slider-range").slider({
     range: true,
     min: 50,
     max: 200,
     values: [50, 200],
     slide: function (event, ui) {
       $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
     }
   });
   $("#amount").val("$" + $("#slider-range").slider("values", 0) +
     " - $" + $("#slider-range").slider("values", 1));
 });

スライダーを作成した後、次のようにスライダーの最小値と最大値を変更できます

$( "#slider-range" ).slider( "option", "max", 60 );
$( "#slider-range" ).slider( "option", "min", 300 );