title: jQuery price filter - set slide values from the filter object
body: <p>Im using the jQuery slide filer to filter products on price. You set the value for the filtering in the script - but I would much rather dynamically set the value based on highest/lowest number on my page that used the data-attribute. </p>
  
  <p>Would this be possible? </p>
  
  <p>Filter objects: </p>
  
  <pre><code>&lt;div class="priceinfo col5" data-price="100"&gt;100&lt;/div&gt;
  &lt;div class="priceinfo col5" data-price="1000"&gt;1000&lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>function showProducts(minPrice, maxPrice) {
  $("#products li").hide().filter(function() {
      var price = parseInt($(this).data("price"), 10);
      return price &gt;= minPrice &amp;&amp; price &lt;= maxPrice;
  }).show();
  }
  
  $(function() {
  var options = {
      range: true,
      min: 0,
      max: 500,
      values: [50, 300],
      slide: function(event, ui) {
          var min = ui.values[0],
              max = ui.values[1];
  
          $("#amount").val("$" + min + " - $" + max);
          showProducts(min, max);
      }
  }, min, max;
  
  $("#slider-range").slider(options);
  
  min = $("#slider-range").slider("values", 0);
  max = $("#slider-range").slider("values", 1);
  
  $("#amount").val("$" + min + " - $" + max);
  
  showProducts(min, max);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5aPg7/" rel="nofollow">http://jsfiddle.net/5aPg7/</a></p>