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

使用 $("#amount").val() 获取范围值，然后使用该值发出请求以获取所需的响应。

在主幻灯片功能中执行以下操作

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 ] 
}