使用 Bootstrap 的价格限制滑块

Question

我在我的网站中使用价格滑块来选择某个价格范围内的产品，但我不确定如何执行此操作。我正在使用来自http://www.eyecon.ro/bootstrap-slider/ 的价格范围滑块。

<div class='priceslider'>
  <p>Range selector, options specified via data attribute.</p>
  <div class="well">
    Filter by price: <b>€ 10</b> 
    <input id="pricelimit" type="text" class="span2" value="" 
           data-slider-min="10" 
           data-slider-max="200" 
           data-slider-step="5" 
           data-slider-value="[20,100]"/>
    <b>€200</b>
  </div>
</div>

$(document).ready(function() {
  $("#pricelimit").slider({});
});

如何从此价格范围滑块中获取值，以及如何在查询中使用它们来选择这些价格值之间的产品？

Answer 1

这应该在滑块滑动时输出滑块的值。

<script type='text/javascript'>
  $('#pricelimit').slider()
     .on('slide', function(ev){
         alert($("#pricelimit").slider('getValue'));
  });
</script>

Answer 2

只需像这样使用.slider('getValue')：

$("#pricelimit").slider('getValue');

应该返回[<em>min</em>, <em>max</em>]

如果您需要在 PHP 或 SQL 中访问服务器上的值，只需确保输入元素回传到服务器即可。然后获取输入元素的值并根据需要使用它。

例如：

$("#pricelimit").val();

应该返回"<em>min</em>, <em>max</em>"

堆栈片段中的演示

$(function() {

  $("#pricelimit")
  .slider({})
  .on('slide', function() {
    $('#output').html(this.value);
  }).trigger('slide');

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class='priceslider'>
  <p>Range selector, options specified via data attribute.</p>
  <div class="well">
    Filter by price: <b>€ 10</b> 
    <input id="pricelimit" type="text" class="span2" value=""
           data-slider-min="10" 
           data-slider-max="200" 
           data-slider-step="5" 
           data-slider-value="[20,100]"/>
    <b>€200</b>
  </div>
</div>
<p>
 <b>Min/Max</b>: <span id="output"></span>
</p>