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 this tutorial, I show how you can use the jQuery UI slider to filter MySQL database records using jQuery AJAX and PHP.

Demo Download

Table structure
Configuration
Download and Include
HTML
AJAX
jQuery
Demo
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 the 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 give you more control over it.

If you found this tutorial helpful then don't forget to share.

Contents

1. Table structure

2. Configuration

3. Download and Include

4. HTML

5. AJAX

6. jQuery

7. Demo

8. Conclusion