Price limit slider with Bootstrap

I'm using a price slider in my site to select products between a certain price range, but I'm not really sure how to do this. I am using the price range slider from http://www.eyecon.ro/bootstrap-slider/.

<!-- language: lang-html -->

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

<!-- language: lang-js -->

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

How do I get the value(s) from this price range slider and how do I use them in a query to select products between those price values?

Just use .slider('getValue') like this:

<!-- language: lang-js -->

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

Which should return <code>[min, max]</code>

If you need to access the values on the server in PHP or SQL, just makes sure the input element is posting back to the server. Then get the value of the input element and use it however you'd like.

For example:

<!-- language: lang-js -->

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

Should return <code>"min, max"</code>

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function() {

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

});

<!-- language: lang-html -->

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

<!-- end snippet -->