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 purposes.

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

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

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

I am 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 for database configuration.

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 it 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 a 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 the 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 the 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. View in new Tab.


8. Conclusion

The 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 a slide event triggers on the slider then send $http request to filter the list.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

7 thoughts on “Make Price Range Slider with AngularJS and PHP”

  1. I can’t make it work : ( I even tried pasting the whole demo into my local server but it won’t show the products, I checked the database and config file and still won’t show anything, do you have any suggestion?

    The console show this error:

    angular.min.js:122 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.6.1/ngRepeat/dupes?p0=product%20in%20products&p1=string%3An&p2=n
    at angular.min.js:6
    at angular.min.js:310
    at angular.min.js:144
    at m.$digest (angular.min.js:145)
    at m.$apply (angular.min.js:148)
    at l (angular.min.js:101)
    at XMLHttpRequest.t.onload (angular.min.js:106)

    Reply

Leave a Comment