Creating Price Range Slider using jQuery in PHP with MySQL

Jquery Price Range Slider with PHP,Mysql
In this tutorials we will create Jquery Ajax price range slider with
PHP,Mysql
.This is very useful for user that allow to filter data/items based on rang slider drag rather than typing price . Nowadays , this is quite common requirements for websites that have products to display or sell .

1) Create Database Table

This is a dynamic task, It fetch products from database .So, we need to have a database and a table .
So, let’s create a database first .We named ‘ajax_example’
Then table ‘product’ . Find below it’s sql code . you can execute this sql code to create the table .

CREATE TABLE 'product' (
 'id' int(11) NOT NULL AUTO_INCREMENT,
 'title' varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 'body' text NOT NULL,
 `image` varchar(255) NOT NULL,
 'cost' float(6,2) NOT NULL,
 'created' datetime NOT NULL,
 'modified' datetime NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2) Create Database configuration file

Create a folder ‘includes’ then a php file ‘config.php’ to store server and database connection .
Put below code .

<?php
 
				// hostname, username, password, DB name
$mysqli=new mysqli('localhost','root','','ajax_example');

if($mysqli->connect_error){
	echo $mysqli->connect_error;
	
}


 
 

?>

3) Create Range Slider’s html file

First of all we have to create a html file . We named it ‘ajax_price_filter.html’ .
Download Jquery from www.jquery.com and Jquery UI from www.jqueryui.com
Now call jquery and jquey UI as shown below

<script src="js/jquery-3.1.0.js"></script>
<script src="jquery_ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery_ui/jquery-ui.css">

Note : call jquery above jquery-ui

4) Range Slider code

You can find Jquery range slider code from jquery official website https://jqueryui.com/slider/#range .
From above page find ‘view source’ on bottom of the page . Click this link to expand the source code .
Now copy and put these codes to initiate Jquery range slider as shown below .

 <script>
  $( function() {
  	
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 100000,
      values: [ 5000, 20000 ],
      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>
  
  
  <div style="float:left; width:26%">
 
	<p>
	  <label for="amount">Price range:</label>
	  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	 
	<div id="slider-range"></div>
	 
 
 
 </div>
 
 
 <div class="content" style="float:left; width:65%; padding:4%">
 

</div>
 
  
  

In above code we mentioned min and max value for the range slider to allow it’s slider range . Similarly default opening range value on ‘values’ .

5) Ajax code to fetch products

Now we put some Jquery ,Ajax code to fetch products .

 var loader="<img src='images/ajax-loader.gif' />";
   
  $('.ui-slider-handle').on('click',function(){
	  $('.content').html(loader);
  
  	  var min_price=$( "#slider-range" ).slider( "values", 0 );
	  var max_price=$( "#slider-range" ).slider( "values", 1 );
	  
	
	
	var qs="min_price="+min_price+"&max_price="+max_price;
		//alert(ctr_id);
		
		$.ajax({
			url:'ajax/products.php',
			type:'GET',
			data:qs,
			success:function(output){
					$('.content').fadeOut('slow',function(){
						$('.content').html(output).fadeIn('fast');
					
					});
					
				

					}
		
		});
	
	

you can find some loader images on this website www.ajaxload.info/ .
On above code , We have stored min and max value and created Query string . Then start Ajax request to send on php file i.e ‘products.php’ located inside ‘ajax’ folder .
After getting output from the php file , we stored it to class ‘content ‘ .
Below code

$('.content').fadeOut('slow',function(){
   $('.content').html(output).fadeIn('fast');
});

Gives smooth fading effect when user drag range slider .

Find below complete code of ajax_price_filter.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="jquery_ui/jquery-ui.css">
  
   <style type="text/css">
  .pr_list{
  width:180px;
  height:220px;
  float:left;
  padding:2px;
  margin:2px;
  border:1px solid #CCCCCC;
   }
  
  </style>
  
  
  
   <script src="js/jquery-3.1.0.js"></script>
  <script src="jquery_ui/jquery-ui.js"></script>
  <script>
  $( function() {
  	
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 100000,
      values: [ 5000, 20000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  
  
  
   
  
  
  
  
    var loader="<img src='images/ajax-loader.gif' />";
   
  $('.ui-slider-handle').on('click',function(){
	  $('.content').html(loader);
  
  	  var min_price=$( "#slider-range" ).slider( "values", 0 );
	  var max_price=$( "#slider-range" ).slider( "values", 1 );
	  
	
	
	var qs="min_price="+min_price+"&max_price="+max_price;
		//alert(ctr_id);
		
		$.ajax({
			url:'ajax/products.php',
			type:'GET',
			data:qs,
			success:function(output){
					$('.content').fadeOut('slow',function(){
						$('.content').html(output).fadeIn('fast');
					
					});
					
				
					}
		
		});
	
	 
  
  });
  
  
  
  
  } );
  </script>
</head>
<body>
 
 
 <div style="float:left; width:26%">
 
	<p>
	  <label for="amount">Price range:</label>
	  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	 
	<div id="slider-range"></div>
	 
 
 
 </div>
 
 
 <div class="content" style="float:left; width:65%; padding:4%">
 

</div>
 
 
 
 
 
 
 
</body>
</html>

6) Create Ajax PHP,Mysql file ‘products.php’

Now create a folder ‘ajax’ then php file i.e products.php .
Put below code

<?php
include "../includes/config.php";

$min_price=$_GET['min_price'];
$max_price=$_GET['max_price'];

//echo "Test min price".$min_price;

$r=$mysqli->query("SELECT * FROM product WHERE cost BETWEEN '$min_price' AND '$max_price' ");

while($row=$r->fetch_assoc()){
	
	echo "<div class='pr_list'>";
		echo "<b>".$row['title']."</b><br>";
		echo "<img src='http://localhost/ajax_example/uploads/".$row['image']."' style='max-height:130px'><br>";
		echo "Cost Rs. ".$row['cost']."<br>";
		
	echo "</div>";
	
}

?>
 

Above we get min and max price value . Queried to database’s table ‘product’ then outputting with while loop .
In this way we create Jquery Ajax range slider with PHP,Mysql . If you have any query ,write below on comment . I will try my best to reply soon .

Online Web Development Training,Video Tutorials