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.

---

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 employees table for listing records.

CREATE TABLE `employees` (
  `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
);

---

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.13.2/themes/smoothness/jquery-ui.css">

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/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 employees table.

Completed Code

<?php include "config.php"; ?>
<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;'>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        <?php 
        $query = 'select * from employees 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 
        }
        ?>
        </tbody>
    </table>
</div>

---

5. AJAX

Create ajaxfile.php file for handling AJAX requests.

Selecting records from the employees 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 employees 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: 'ajaxfile.php',
                    type: 'post',
                    data: {min:min,max:max},
                    success: function(response){

                        // Updating table data
                        $('#emp_table tbody').empty();
                        $('#emp_table tbody').html(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.