jquery - JQuery 范围滑块

Question

嗨，我是 JQuery 的新手，我在这里找到了一个滑块：JQuery Range Slider，我在我的 html 页面中复制了这段代码

<script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "€" + ui.values[ 0 ] + " - €" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - €" + $( "#slider-range" ).slider( "values", 1 ) );
  });
 $( "input" ).rangeslider();
  </script>

我还在我的身体中包含了 css 和滑块 div。例如，如果我将滑块从 10 美元 - 30 美元移动，它应该在我的内容中只显示这些产品，它们在这个范围之间。价格在输入字段中。

希望可以有人帮帮我！

Answer 1

Get range value using $("#amount").val() and then make your request to get required response with this value.

In the main slide function do as follows

slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

        //here make ajax call with input value 1 as ui.values[ 0 ] 
        //                                and  2 as ui.values[ 1 ] 
}