Slider Filter Price Divs
HTML
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<p class="filter-text">
<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 id="products">
<div class="product">
<div class="price">$19.95
</div>
</div>
<!-- This product has shipping info inserted -->
<div class="product">
<div class="price"> $54.99
<div class="shipping-info">$5.99</div>
</div>
</div>
<!-- This product has the original price in a span and the shipping info inserted -->
<div class="product">
<div class="price"><span>$189.99</span>$99.99
<div class="shipping-info">Free Shipping</div>
</div>
</div>
</div>
CSS
.ui-slider-horizontal {
height: 0.2em !important;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
background: #279cea;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
border-radius:50px;
}
.filter-text input{
text-align:right;
color:#000 !important;
background:transparent;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.51em;
margin-left: -.6em;
}
div#slider-range{
margin-top:20px !important;
}
JavaScript
function showProducts(minPrice, maxPrice) {
$(".product").hide().filter(function() {
var price = $('.price').contents().filter(function() {
return this.nodeType == 3; //just text not span or shipping div
}).text();
price = price.replace(/\$/g, '');
return price >= minPrice && price <= maxPrice;
}).fadeIn("slow");
}
$(function() {
var options = {
range: true,
min: 0,
max: 300,
values: [0, 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);
});