How to use jQuery UI slider to filter records with AJAX

A slider is a good way to avoid bad input from the user if you want them to pick values within the range.

To add slider control I am using jQuery UI slider.

In the tutorial example, I am list records from the MySQL database table and filter the list on a salary basis using the slider widget.

Contents

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

1. Table structure

I am using employee table for listing records.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `salary` varchar(20) NOT NULL,
  `city` varchar(80) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a config.php for a database connection.

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 and include the following files with the jQuery library.

<!-- CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

4. HTML

For adding the range slider I added a <div > container and initializing it using jQuery.

List all records from employee table.

Completed Code

<div class="container" >
 <!-- slider --> 
 <div id="slider"></div><br/>
 Range: <span id='range'></span>
 
 <table id='emp_table' width='100%' border='1' style='border-collapse: collapse;'>
  <tr>
   <th>Name</th>
   <th>Email</th>
   <th>Salary</th>
   <th>City</th>
  </tr>
  <?php 
  $query = 'select * from employee order by emp_name asc';
  $result = mysqli_query($con,$query);
  while($row = mysqli_fetch_array($result)){
   $emp_name = $row['emp_name'];
   $email = $row['email'];
   $salary = $row['salary'];
   $city = $row['city'];
  ?>
  <tr>
   <td><?php echo $emp_name; ?></td>
   <td><?php echo $email; ?></td>
   <td><?php echo $salary; ?></td>
   <td><?php echo $city; ?></td>
  </tr>
  <?php 
 }
 ?>
 </table>
</div>

5. AJAX

Create getData.php file for handling AJAX requests.

Selecting records from the employee table based on $_POST range values and return a string value.

Completed Code

<?php

include 'config.php';

/* Range */
$min = $_POST['min'];
$max = $_POST['max'];

/* Query */
$query = 'select * from employee where salary>='.$min.' and salary<='.$max;
$result = mysqli_query($con, $query);

$html = '';
while( $row=mysqli_fetch_array($result) ){
 $emp_name = $row['emp_name'];
 $email = $row['email'];
 $salary = $row['salary'];
 $city = $row['city'];

$html .='<tr>';
 $html .='<td>'.$emp_name.'</td>';
 $html .='<td>'.$email.'</td>';
 $html .='<td>'.$salary.'</td>';
 $html .='<td>'.$city.'</td>';
 $html .='</tr>';
}

echo $html;

6. jQuery

Calling slider() method on <div id='slider'> to initialize slider.

Add the limit to control using min: 20000 and max: 80000 properties. Set the slider initial with values: [ 22000, 25000].

The slide triggers when the range is being changed from where sending AJAX request using current slide values as data.

Updating table data with AJAX response on successful callback.

Completed Code

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

       // Get values
       var min = ui.values[0];
       var max = ui.values[1];
       $('#range').text(min+' - ' + max);
       
       // AJAX request
       $.ajax({
         url: 'getData.php',
         type: 'post',
         data: {min:min,max:max},
         success: function(response){

           // Updating table data
           $('#emp_table tr:not(:first)').remove();
           $('#emp_table').append(response); 
         } 
       });
     }
   });
});

7. Demo

View Demo

8. Conclusion

In the demonstration, I used the jQuery UI slider to filter the list of records but you can use it in various other cases e.g. show products based on the slider set price range.

There are different-different options, methods, and events that are available that gives you more control over it.