Follow me in twitter
Menu manager is a new way to arrange your site's navigation. http://www.mypaaji.com/mm/
— jQuery Price Range Slider With Products Interface
In this post we will learn how to create a price range slider using jQuery and jQuery UI. First of all we need to download jQuery and jQuery UI’s slider component js. If you see any room for improvement, or if you can add something than go ahead and comment and I will definitely give it a look for possible inclusion.
Download jQuery from here → Link (jQuery v 1.4)
Now go to jQuery UI and click on Themes then click on “Download theme button”
After clicking “Download Theme” you can configure your download as we don’t want all the files so click on “Deselect all components” then check “Slider” component and click on download button to download all the necessary files.
Unzip it once downloaded, you will find following folders in it. Copy js folder in your project folder then go to css folder > custom theme and copy images folder and jquery-ui-1.8rc1.custom.css too.
Ok we are all set to do some coding now 
..
Markup
Create a file of name “index.php” and paste following code in it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="jquery-ui-1.8rc1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider(); // initializing slider
});
</script>
<title></title>
<style type="text/css">
body{font-size: 12px;}
.left{float:left;}
.clear{clear:both}
#wrapper{margin:40px auto;width:940px}
#leftSlider{width: 200px;margin-right: 30px;}
#products{width:710px}
#products ul{
list-style: none;
margin:0px;padding:0px
}
#products ul li{
margin:4px;
float:left;
height:180px;
width:200px;
background-color: #333;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="left" id="leftSlider">
<div id="slider"></div>
</div>
<div class="left" id="products">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
Adding Range To Slider
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="jquery-ui-1.8rc1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$slider = $("#slider");//Caching slider object
$amount = $("#amount");//Caching amount object
$slider.slider({
range: true, // necessary for creating a range slider
min: 0, // minimum range of slider
max: 500, //maximimum range of slider
values: [75, 300], //initial range of slider
slide: function(event, ui) { // This event is triggered on every mouse move during slide.
$amount.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of amount span to current slider values
}
});
$amount.html('$' + $slider.slider("values", 0) + ' - $' + $slider.slider("values", 1));
});
</script>
<title></title>
<style type="text/css">
body{font-size: 12px;font-family:"Arial","Helvetica","Verdana","sans-serif";}
.left{float:left;}
.clear{clear:both}
#wrapper{margin:40px auto;width:940px}
#leftSlider{width: 200px;margin-right: 30px;}
#range{margin-bottom: 20px;}
#products{width:710px}
#products ul{
list-style: none;
margin:0px;padding:0px
}
#products ul li{
margin:4px;
float:left;
height:180px;
width:200px;
background-color: #333;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
}
#amount{font-size: 14px;text-shadow:0px 1px 0px #ccc}
</style>
</head>
<body>
<div id="wrapper">
<div class="left" id="leftSlider">
<div id="range">Price Range <span id="amount"></span></div>
<div id="slider"></div>
</div>
<div class="left" id="products">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
Data From Database
First create a database of any name then create a table of following structure.
CREATE TABLE `products` ( `id` INT NOT NULL AUTO_INCREMENT , `image_url` TEXT NOT NULL , `price` INT( 4 ) NOT NULL , PRIMARY KEY ( `id` ) ) ;
we have not included field like “product_name” or “product_description” because they are not needed in this demo.
Insert some dummy data so that we can fetch and show it using PHP
INSERT INTO `products` (`id`, `image_url`, `price`) VALUES (NULL, 'product1.jpg', '200'), (NULL, 'product2.jpg', '120'), (NULL, 'product3.jpg', '80'), (NULL, 'product4.jpg', '320'), (NULL, 'product5.jpg', '400'), (NULL, 'product6.jpg', '480'), (NULL, 'product7.jpg', '500'), (NULL, 'product8.jpg', '270'), (NULL, 'product9.jpg', '370');
Adding PHP
Create a file of name “slider.php” and paste the following code in it
<?php
// connect to MySQL
mysql_connect('localhost', 'root', '') or
die ('Unable to connect. Check your connection parameters.');
// select the correct database
mysql_select_db('sliderDemo') or die(mysql_error());
//get the minimum price of products
function minSliderValue() {
$query = "SELECT min(price) as minValue from products";
$result = mysql_query($query) or die(mysql_error());
if(mysql_num_rows($result) > 0) {
$row = mysql_fetch_assoc($result);
return $row['minValue'];
}
}
//get the maximum price of products
function maxSliderValue() {
$query = "SELECT max(price) as maxValue from products";
$result = mysql_query($query) or die(mysql_error());
if(mysql_num_rows($result) > 0) {
$row = mysql_fetch_assoc($result);
return $row['maxValue'];
}
}
//Dispaly products
function showProducts($where='') {
$query = "SELECT * from products";
if($where != '') {
$query = $query .' where '. $where;
}
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) {
$html = '<ul>';
while($row = mysql_fetch_assoc($result)) {
$html .= "
<li>
<img src='images/products/{$row['image_url']}'/>
<span class='price-tag'>Price: $ {$row['price']}</span>
</li>
";
}
$html .= '</ul>';
}
else{
$html = 'Sorry No Records Found';
}
return $html;
}
?>
Edit your index.php as the following code so that it can show data from database.
<?php
include 'slider.php';
$minValue = minSliderValue(); //Get minimum price of product for slider min value
$maxValue = maxSliderValue(); //Get maximum price of product for slide max value
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="jquery-ui-1.8rc1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$slider = $("#slider");//Caching slider object
$amount = $("#amount");//Caching amount object
$slider.slider({
range: true, // necessary for creating a range slider
min: <?php echo $minValue;?>, // minimum range of slider
max: <?php echo $maxValue;?>, //maximimum range of slider
values: [<?php echo $minValue;?>, <?php echo $maxValue?>], //initial range of slider
slide: function(event, ui) { // This event is triggered on every mouse move during slide.
$amount.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of amount span to current slider values
}
});
$amount.html('$' + $slider.slider("values", 0) + ' - $' + $slider.slider("values", 1));
});
</script>
<title></title>
<style type="text/css">
body{font-size: 12px;font-family:"Arial","Helvetica","Verdana","sans-serif";}
.left{float:left;}
.clear{clear:both}
#wrapper{margin:40px auto;width:940px}
#leftSlider{width: 200px;margin-right: 30px;}
#range{margin-bottom: 20px;}
#products{width:710px}
#products ul{
list-style: none;
margin:0px;padding:0px
}
#products ul li{
background-color:#333333;
float:left;
height:127px;
margin:4px;
padding:8px;
width:190px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
position: relative;
}
.price-tag{-moz-border-radius-bottomright:6px;
-moz-border-radius-topright:6px;
-webkit-border-radius-bottomright:6px;
-webkit-border-radius-topright:6px;
-khtml-border-radius-bottomright:6px;
-khtml-border-radius-topright:6px;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
-khtml-box-shadow:0px 0px 4px #000;
background-color:#C6CF6B;
bottom:22px;
color:#000000;
font-weight:bold;
left:8px;
padding:6px;
position:absolute;
}
#amount{font-size: 14px;text-shadow:0px 1px 0px #ccc}
</style>
</head>
<body>
<div id="wrapper">
<div class="left" id="leftSlider">
<div id="range">Price Range <span id="amount"></span></div>
<div id="slider"></div>
</div>
<div class="left" id="products">
<?php
echo showProducts();
?>
</div>
</div>
</body>
</html>
Adding Ajax
Now we need to load the data from database and records should match our slider’s value, for this we will use “stop” event of slider component. This event is triggered when the user stops sliding.
$slider.slider({
range: true, // necessary for creating a range slider
min: <?php echo $minValue;?>, // minimum range of slider
max: <?php echo $maxValue;?>, //maximimum range of slider
values: [<?php echo $minValue;?>, <?php echo $maxValue?>], //initial range of slider
slide: function(event, ui) { // This event is triggered on every mouse move during slide.
$amount.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of amount span to current slider values
},
stop: function(event, ui){
}
});
Now create one more file of name “ajaxSlider.php” and paste the following code in it
<?php
include 'slider.php';
$minValue = (int)$_GET['minValue'];
$maxValue = (int)$_GET['maxValue'];
if($minValue!=''&&$maxValue!='') {
$where = "price >= $minValue and price <= $maxValue ";
echo showProducts($where);
}
?>
Open your index.php file and update the slider component code like as follows
$(function() {
$slider = $("#slider");//Caching slider object
$amount = $("#amount");//Caching amount object
$products = $('#products');//Caching product object
$ajaxMessage = $('#ajaxMessage');//Caching ajaxMessage object
$slider.slider({
range: true, // necessary for creating a range slider
min: <?php echo $minValue;?>, // minimum range of slider
max: <?php echo $maxValue;?>, //maximimum range of slider
values: [<?php echo $minValue;?>, <?php echo $maxValue?>], //initial range of slider
slide: function(event, ui) { // This event is triggered on every mouse move during slide.
$amount.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of amount span to current slider values
},
stop: function(event, ui){//This event is triggered when the user stops sliding.
$ajaxMessage.css({display:'block'});
$products.find('ul').css({opacity:.2});
$products.load('ajaxSlider.php?minValue='+ui.values[0]+'&maxValue='+ui.values[1],'',function(){
$ajaxMessage.css({display:'none'});
});
}
});
$amount.html('$' + $slider.slider("values", 0) + ' - $' + $slider.slider("values", 1));
});
That’s it guys
really thanks a lot!!! it'
Share Some Love