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

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

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

哪个应该返回[min, max]

如果需要以PHP或SQL访问服务器上的值，只需确保输入元素正在回发到服务器。然后获取input元素的值并按照您的意愿使用它。

例如：

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

应该返回"min, max"

Stack Snippets中的演示

$(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>

Answer 2

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

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

Bootstrap

2 个答案:

Stack Snippets中的演示