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 .

php mysql video tutorial in Hindi language by UnitedWebSoft

1) Create Database Table


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 .