product filter

product filter with price slider and radio boxes

by Akram kamal

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<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>
    </div>
<div id="CategoryContent">
<ul id="products">

<li class="product" data-price="10">Brand1 PRODUCT1 TeamA</li>
<li class="product" data-price="20">Brand1 PRODUCT2 TeamB</li>
<li class="product" data-price="30">Brand2 PRODUCT3 TeamB</li>
<li class="product" data-price="40">Brand2 PRODUCT4 TeamC</li>
<li class="product" data-price="50">Brand3 PRODUCT5 TeamA</li>
<li class="product" data-price="60">Brand3 PRODUCT6 TeamD</li>
<li class="product" data-price="70">Brand4 PRODUCT7 TeamD</li>
<li class="product" data-price="80">Brand1 PRODUCT8 TeamA</li>
<li class="product" data-price="90">Brand1 PRODUCT9 TeamA</li>
<li class="product" data-price="100">Brand1 PRODUCT10 TeamB</li>
<li class="product" data-price="110">Brand4 PRODUCT11 TeamD</li>
<li class="product" data-price="120">Brand2 PRODUCT12 TeamA</li>
</ul>

<div style="clear:both;"></div>
<div class="filter">
<form id= "brandfilter" action="">
    <h2>Attribute1:</h2>
<input type="radio" name="brand" value="Brand1"/>Brand1 </br>
<input type="radio" name="brand" value="Brand2"/>Brand2 </br>
<input type="radio" name="brand" value="Brand3"/>Brand3 </br>    
<input type="radio" name="brand" value="Brand1"/>Brand4 </br>
 <h2>Attribute2:</h2>
<form id="teamfilter" action="">
<input type="radio" name="team" value="TeamA"/>TeamA </br>
<input type="radio" name="team" value="TeamB"/>TeamB </br>
<input type="radio" name="team" value="TeamC"/>TeamC </br>
<input type="radio" name="team" value="TeamD"/>TeamD </br>
</form>


</div>

</div>

JavaScript

var $filters = $("input:radio[name='brand'],input:radio[name=team]").prop('checked', false); // start all checked
var $categoryContent = $('#CategoryContent li');
$filters.click(function() {
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest.
    $categoryContent.hide();
    $filters.filter(':checked').each(function(i, el) {
        $categoryContent.filter(':contains(' + el.value + ')').show();
    });
});

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);
});