February 17, 2024 5:06 am

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.

How to create Price Range Slider in jQuery & PHP with MySQL

[wpdm_file id=56]DEMO

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&nbsp;&nbsp;&nbsp;=> <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: 0max: 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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

15 responses to “How to create Price Range Slider in jQuery & PHP with MySQL”

  1. Mawia HL says:

    Useful and great tutorial..

  2. Arpit says:

    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 ??

    • huzoorbux says:

      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.

  3. Aish says:

    hi! Awesome work done! However, I can’t seem to download the code although I have subscribes. Can some one please help..Thank you!

  4. Vishnu Priya says:

    article is so informative and so simple to understand.To learn more php projects online click on – http://netultimateschool.com/category/courses/php-courses/

  5. Anuj says:

    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

  6. Sachin S says:

    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

  7. Danish Shaikh says:

    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]

  8. Carlos Calderon says:

    is there a way to change the slider so it increments in 100 s ?

  9. Mick says:

    Nice tutorial (again)! Thanks!!

Leave a Reply

Your email address will not be published. Required fields are marked *