javascript - create dynamic price range slider in java

Question

I want to create a dynamic Price range slider somthing like makemytrip.com. which will have min and max price value based on product price e.g the lowest product price is $50 and the highest is $200, can the available range in the slider start with $50 and end with $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 );