Make Price Range Slider with AngularJS and PHP

Most of the eCommerce sites e.g. Flipkart, Snapdeal, etc have a price range slider for searching purpose.

The user doesn’t have to enter price range manually.

It will automatically filter the list when the price is been changed by the user.

In this tutorial, I am implementing the similar type of functionality with AngularJS and PHP.

Using jQuery UI to create the slider.

Make Price Range Slider with AngularJS and PHP


Contents

  1. Table structure
  2. Configuration
  3. Download and Include
  4. HTML
  5. PHP
  6. Script
  7. Demo
  8. Conclusion

 

1. Table structure

Using products table in the demonstration.

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(80) NOT NULL,
  `price` int(11) NOT NULL,
  `image` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 

2. Configuration

Create a new config.php file.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

 

3. Download and Include

Download jQuery UI, Bootstrap, and Angular JS and include in the page.

<!-- Script -->
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<script src='jquery-ui.min.js' type='text/javascript'></script>

<!-- CSS -->
<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>

<!-- Bootstrap -->
<script src='bootstrap/js/bootstrap.js'></script>
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css' />

<!-- Angular -->
<script src='angular.min.js'></script>

 

4. HTML

  • Slider

Create <div id='slider' ></div> container to show slider and initialize it using jQuery.

  • List Products

Define ng-repeat directive on a <div > to display products list.

Completed Code

<body ng-app='myapp'>
 <div class="container" id='productCtrl' ng-controller='productCtrl'>
 
  <!-- slider -->
  <div class='row' style='margin-top: 20px;'> 
   <div class='col-md-12'>
    <div id="slider"></div><br/>
     Range: <span id='range'></span>
   </div>
  </div>

  <div class='row' >
   <div class='col-md-3' ng-repeat="product in products" >
    <img ng-src='products/{{ product.image }}' width='100%' ><br>
    {{ product.name }}<br>
    Rs.{{ product.price }}
   </div>
  </div>
 </div>

</body>

 

5. PHP

Create new getData.php file.

  • All products ($task == 1)

If POST task value is 1 then return all records from products Table.

  • Filter ($task == 2) 

Use POST min and max values in products Table to filter records if $task value is 2.

Completed Code

<?php

include 'config.php';

$data = json_decode(file_get_contents("php://input"));

$task = $data->task;

$response = array();
// get all products
if($task == 1){
  $query = 'select * from products order by price asc';
  $result = mysqli_query($con,$query);
  while($row = mysqli_fetch_array($result) ){
   $response[] = $row;
  }
}

// filter products by minimum and maximum price range
if($task == 2){
 $min = $data->min;
 $max = $data->max;

 $query = 'select * from products where price between "'.$min.'" and "'.$max.'" order by price asc';
 $result = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($result) ){
  $response[] = $row;
 }
}

echo json_encode($response);

 

6. Script

  • Initialize Slider

Call slider() method on <div id='slider'> and set min:0 and max:20000. When slide event trigger on the slider then get the range values and call the Angular priceFilter() method for filter list.

  • Get All products list and filter

Send $http request to get all products list and initialize $scope.products with the response.

The priceFilter() method is been called when slide event trigger on slider then send $http request where pass range values and initialize $scope.products with the response.

Completed Code

// jQuery
$(document).ready(function(){

 // Initializing slider
 $( "#slider" ).slider({
  range: true,
  min: 0,
  max: 20000,
  values: [ 0, 20000 ],
  slide: function( event, ui ) {

   // Get values
   var min = ui.values[0];
   var max = ui.values[1];
   $('#range').text(min+' - ' + max);
 
   // Call Angular method
   angular.element('#productCtrl').scope().priceFilter(min,max);
   angular.element('#productCtrl').scope().$apply() 
  }
 });
});

// Angular JS
var products = angular.module('myapp', []);
 
products.controller('productCtrl', ['$scope', '$http', function ($scope, $http) {

 $http({
  method: 'post',
  url: 'getData.php',
  data: {task:1},
 }).then(function successCallback(response) { 
  // Store response data
  $scope.products = response.data;
 });

 $scope.priceFilter = function(min,max){
 
  $http({
   method: 'post',
   url: 'getData.php',
   data: {min:min,max:max,task:2},
  }).then(function successCallback(response) { 
   // Store response data
   $scope.products = response.data;
  });
 }
 
}]);

 

7. Demo

Change price range using Slider. Open in new Tab.


 

8. Conclusion

Price range slider allows the user to filter the available record list by setting the price range in the slider.

In the demonstration, I use jQuery UI to create the range slider and when slide event triggers on the slider then send $http request to filter the list.

Related Post

Spread the love

3 Comments

  1. riyaa said:

    i have downloaded this code but it is not running.. products are not displaying on index page

    May 5, 2017
    Reply
    • Yogesh Singh said:

      I solved the problem and update the download files.

      May 5, 2017
      Reply
  2. raju said:

    thank you bro..

    June 22, 2017
    Reply

Leave a Reply

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