A slider is a good 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 demonstration, I am list records from the MySQL database table and filter the list on salary basis using slider widget.

Contents

1. Table structure
2. Download and Include
3. HTML
4. AJAX
5. jQuery
6. Demo
7. 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. Download and Include

Download jQuery UI and include the following files with the jQuery library.

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

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

3. 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 = mysql_query($query);
  while($row = mysql_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>

4. AJAX

Selecting records from the 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 = mysql_query($query);

$html = '';
while( $row=mysql_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;

5. jQuery

Calling slider() method on <div id='slider'> to initalize 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); 
    } 
   });
  }
 });
});

6. Demo

Adjust the range in the slider.

7. Conclusion

In the demonstration, I used 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 are available which give you more control over it.