jQuery price filter - set slide values from the filter object

Question

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.

Would this be possible?

Filter objects:

<div class="priceinfo col5" data-price="100">100</div>
<div class="priceinfo col5" data-price="1000">1000</div>

Script:

function showProducts(minPrice, maxPrice) {
$("#products li").hide().filter(function() {
    var price = parseInt($(this).data("price"), 10);
    return price >= minPrice && price <= 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);
});

http://jsfiddle.net/5aPg7/

Answer 1

You can get all the price values and then find the max & min like

function showProducts(minPrice, maxPrice) {
  $("#products li").hide().filter(function() {
    var price = parseInt($(this).data("price"), 10);
    return price >= minPrice && price <= maxPrice;
  }).show();
}

$(function() {
  var prices = $('#products li').map(function() {
    return $(this).data('price');
  }).get();
  var options = {
      range: true,
      min: Math.min.apply(Math, prices),
      max: Math.max.apply(Math, prices),
      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);
});

.demo {
  padding: 25px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="demo">

  <p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>

  <div id="slider-range"></div>
  <ul id="products">
    <li data-price="10">product - £10</li>
    <li data-price="50">product - £50</li>
    <li data-price="100">product - £100</li>
    <li data-price="150">product - £150</li>
    <li data-price="200">product - £200</li>
  </ul>
</div>