AdSense

Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql, Make Price Range Slider using JQuery with PHP Ajax, range filter system

In this post, we have a cover topic such as How to Create a Slider for Jquery Ajax Price Range Using PHP Using MySQL. It is helpful for the user to filter data or items based on the value generated when the drag area slider appears in the products and not the rate type. In the current scenario, this is the most common function on e-commerce websites to display products or sell products online. The Jquery UI Range slider is very useful for adding quality filters to our data or list items. The JQuery UI Range slider is mainly helpful in finding items or data by price range. The price range slider allows you to filter the list of data by dragging a price range as an alternative to entering a physical price.

In this blog we developed a price range slider using jQuery UI and then added a filter function to the item list or data list using PHP and MySQL. Price range filters are a mandatory feature of any item or product list, and this range slider is the ideal choice for price filters. So here we are looking at how we can use the jQuery user interface with PHP to insert a simple slider for price range into the item list from the product list and then filter the products by price range with Ajax JQuery with PHP and MySQL.



See Also

1. Live Search in PHP Mysql using jQuery AJAX

2. Autocomplete Textbox using jQuery AJAX in PHP MySql


This four step to implement Range Slider Filter 

1. Create database connection
2. Create database and table
2. Create Search record with range slider Filter 
3. Create PHP Code for range slider Filter


1. Create database connection


We first need to create a database connection file called dbConfig.php to fetch data from products table.

dbConfig.php
<?php
	// Database configuration 
	$dbHost     = "localhost"; 
	$dbUsername = "root"; 
	$dbPassword = ""; 
	$dbName     = "database"; 
	 
	// Create database connection 
	$conn = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName); 
	 
	// Check connection
	if ($conn->connect_error) {
	  die("Connection failed: " . $conn->connect_error);
	}

?>

2. Create Database and table 

--
-- Database: `database`

-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `price` int(11) NOT NULL,
  `product_code` varchar(50) NOT NULL,
  `description` text NOT NULL,
  `qty` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `name`, `price`, `product_code`, `description`, `qty`) VALUES
(1, 'Samsung Galaxy', 16900, 'SAMSUNGGAL12', 'Samsung Galaxy M31 Prime Edition (Space Black, 6GB RAM, 128GB Storage) - Get Rs 2,000 Amazon Pay cashback on prepaid orders. Limited Period offer', 1),
(2, 'New Apple iPhone 11', 55999, 'APPLEIPHONE11', 'New Apple iPhone 11 (64GB) - (Product) RED\r\n', 1),
(3, 'Samsung Galaxy', 18900, 'SAMSUNGGAL12', 'Samsung Galaxy M31 Prime Edition (Space Black, 6GB RAM, 128GB Storage) - Get Rs 2,000 Amazon Pay cashback on prepaid orders. Limited Period offer', 1),
(4, 'New Apple iPhone 11 X', 65000, 'APPLEIPHONE11', 'New Apple iPhone 11 (64GB) - (Product) RED\r\n', 1),
(5, 'Vivo Y22i', 12490, 'VIVOY20', 'Vivo Y20i (Dawn White, 3GB RAM, 64GB Storage) with No Cost EMI/Additiona', 1),
(6, 'boAt Airdopes 441 TWS Ear-Buds', 1700, 'boAtAirdopes441', 'boAt Airdopes 441 TWS Ear-Buds with IWP Technology, Immersive Audio, Up to 30H Total Playback, IPX7 Water Resistance, Super Touch Controls, Secure Sports Fit & Type-C Port(Sporty Blue)', 5),
(7, 'Vivo Y20i', 21900, 'VIVOY20', 'Vivo Y20i (Dawn White, 3GB RAM, 64GB Storage) with No Cost EMI/Additiona', 1),
(8, 'boAt Airdopes 551 TWS Ear-Buds', 2499, 'boAtAirdopes441', 'boAt Airdopes 441 TWS Ear-Buds with IWP Technology, Immersive Audio, Up to 30H Total Playback, IPX7 Water Resistance, Super Touch Controls, Secure Sports Fit & Type-C Port(Sporty Blue)', 5);
 

3.Create Search record with range slider Filter 


index.php
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style type="text/css">
  .ui-widget-header{
    background: #6734eb;
  }
  .ui-state-default{
    background: #667561;
  }
  .table th {
    text-align: center;
  } 
</style>
<div class="card text-center" style="padding:20px;">
  <h3>Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql</h3>
</div><br>
  
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
        <p>
          <label for="amount">Product Price Filter:</label>
          <span id="amount" style="border:0; color:#00008B; font-weight:bold;"></span>
        </p>
      <div id="slider-range"></div><br>

      <table class="table table-striped" id="tableData">
        <thead>
          <tr>
            <th>S.no</th>
            <th>Name</th>
            <th>Price</th>
            <th>Product code</th>
            <th>Quantity</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<script type="text/javascript">
  $(document).ready(function(){

    var v1 = 1000;
    var v2 = 30000;

    $("#slider-range").slider({
      range: true,
      min: 1500,
      max: 70000,
      values: [v1, v2],
      slide: function(event, ui) {
          $("#amount").html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          v1 = ui.values[ 0 ];
          v2 = ui.values[ 1 ];
          loadRecords(v1, v2);
        }
    });

    $("#amount").html("$" + $("#slider-range" ).slider( "values", 0 ) + " - $" + $("#slider-range").slider("values", 1));

    function loadRecords(range1, range2){
      $.ajax({
        url : "action.php",
        type: "POST",
        data : {minAge : range1, maxAge : range2},
        cache:false,
        success:function(result){
          $("#tableData tbody").html(result);
        }
      });
    }
    loadRecords(v1, v2);
  });
</script>




Output


Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql system software


4. Create PHP Code for range slider Filter

action.php

<?php
		
	// Include database connectivity
	
	include_once('dbConfig.php');

	if (isset($_POST['minAge']) && isset($_POST['maxAge'])) {

		$minAge = $_POST['minAge'];
		$maxAge = $_POST['maxAge'];
		$query = "SELECT * FROM products WHERE price BETWEEN {$minAge} AND {$maxAge}";
	}
	else{
		$minAge = "";
		$maxAge = "";
		$query = "SELECT * FROM products ORDER BY id ASC";
	}

	$results = mysqli_query($conn, $query);
	
	if (mysqli_num_rows($results) > 0) {

		$output = "";
		
		while($row = mysqli_fetch_array($results)){

		$output.="<tr align='text-center'>
		           <td>{$row["id"]}</td>
		           <td>{$row["name"]}</td>
		           <td>{$row["price"]}</td>
		           <td>{$row["product_code"]}</td>
		           <td>{$row["qty"]}</td>
		           <td>{$row["description"]}</td>
		        </tr>";
		}

		echo $output;

	}else{
		echo "<h3>No record found</h3>";
	}
	
?>


You can always support by sharing on social media or recommending my blog to your friends and colleagues.   

If you have any suggestions / problems about this tutorial, please comment on the  form below.😊

1 Comments

  1. how would you add another input field to that code?

    ReplyDelete

Post a Comment

Previous Post Next Post