How to create Price Range Slider in jQuery & PHP with MySQL
I have received many requests from my readers to create a price range slider, this article going to solve there problems so basically I used jQuery UI to perform this tutorial base which is jQuery and created a PHP and MySQL settings for ease of PHP Programmers so let see how it works and how to configure it in your websites. Mostly Developers use this slider in eCommerce sites where people can search products with price range.
Database Details:
database name => phpgang
table name => like
db.sql
Database file run in your MySQL to create database and add data in table.
-- -- Table structure for table `products` -- CREATE TABLE `products` ( `id` int(10) NOT NULL AUTO_INCREMENT, `product` text NOT NULL, `price` float(5,2) NOT NULL, `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `status` int(1) NOT NULL DEFAULT '1', PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; -- -- Dumping data for table `products` -- INSERT INTO `products` VALUES (1, 'Product # 1', 70.54, '2014-01-06 03:20:23', 1); INSERT INTO `products` VALUES (2, 'Product # 2', 300.00, '2014-01-06 03:20:23', 1); INSERT INTO `products` VALUES (3, 'Product # 3', 805.88, '2014-01-06 03:20:42', 1);
db.php
Edit this file as per your database credentials, I used MySQLi as you know MySQL is deprecated in latest version and will be removed. I suggest all developers to user MySQLi in your PHP applications instead of MySQL.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>index.php
Contains HTML and PHP code to select records from database and show the products those come in the rang of given price.
<?php
include('db.php');
if($_POST)
{
mysqli_real_escape_string($connection,$_POST['amount']);
$values = str_replace(' ','',$_POST['amount']);
$values = str_replace('$','',$values);
$values = explode('-',$values);
$min = $values[0];
$max = $values[1];
$res = mysqli_query($connection,'select `id`,`product`,`price`, DATE_FORMAT(`date`,"%D %b-%Y") as `date` from products where `price` BETWEEN "'.$min.'" AND "'.$max.'"');
$count = mysqli_num_rows($res);
$HTML='';
if($count > 0)
{
while($row=mysqli_fetch_array($res))
{
$id = $row['id'];
$product = $row['product'];
$price = $row['price'];
$date = $row['date'];
$HTML .= '<div>';
$HTML .= 'Product ID: '.$id;
$HTML .= '<br />Product Name: '.$product;
$HTML .= '<br />Price: <strong>$'.$price.'</strong> Posted on: '.$date;
$HTML .= '</div><br /><hr />';
}
}
else
{
$HTML='No Data Found';
}
}
else
{
$min = 30;
$max = 700;
$HTML='Search Products in range.';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create Price Range Slider in jQuery & PHP with MySQL | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
img {border-width: 0}
* {font-family:'Lucida Grande', sans-serif;}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<script type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000,
values: [ <?php echo $min; ?>, <?php echo $max; ?> ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<body>
<div>
<h2>How to create Price Range Slider in jQuery & PHP with MySQL Example => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<form action="" method="post" id="products">
<div style="margin-left:20px">
<label for="amount">Price range:</label>
<input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>
<br><br>
<div id="slider-range" style="width:80%;"></div>
<br><br>
<input type="submit" value=" Show products " />
<br><br>
<?php echo $HTML; ?>
</div>
</form>
</body>
</html>In above code there is a range limit given min: 0, max: 1000, minimum is 0 and maximum is 1000 you can edit it as per your requirement and also can make it dynamic like in database you have product with min price and product with max price both are on your websites requirement. values: [ <?php echo $min; ?>, <?php echo $max; ?> ] this jQuery line used to show current selected rage and in this tutorial i have selected 30 to 700 and you can chose your own.
In PHP code i used to get products from database in selected rage in demo I added 3 dummy products with different values.
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
jQuery UI library and jQuery library required to perform Slider navigation.
All files attached in download and provide a demo to view test it.
Tutorial Categories:
Useful and great tutorial..
to make slider dynamic do we need to execute one more sql query
For eg: select `price` from product order by desc limit 1 and echo the result for min value
OR there is any other simpler way ??
Its upto you if you want to get price range from database as if you select max rage $1000 and you have recent product in database added is about $1200 then no one can be able to get that product in price range.
yes thats true. thank You so much .. keep writing such tutorials ..they really help 🙂
and you explain in very simple manner . good going PHPgang
hi! Awesome work done! However, I can’t seem to download the code although I have subscribes. Can some one please help..Thank you!
article is so informative and so simple to understand.To learn more php projects online click on – http://netultimateschool.com/category/courses/php-courses/
How can use this slider for onchange event of input text box. I have tried it but it doesn’t work for on change event
you can call event on text box value change it might work for you.
Hi i get this
Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:xampphtdocssliderindex.php on line 19 also slider is not displaying..
Im using SQL not sqli
Dynamic image slider using Twitter Bootstrap & PHP with MySQL
How to create Advanced Pagination in PHP & MySQL with jQuery
How to create Like & Unlike System in PHP MySQL and jQuery
How to Integrate live search in PHP and MySQL with jQuery
if any one have this programs please send me in my mail id
[email protected]
is there a way to change the slider so it increments in 100 s ?
Nice tutorial (again)! Thanks!!
Great Post with demo.
Nice post!