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
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
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.
If you found this tutorial helpful then don't forget to share.