In this tutorial, we have create a price range slider using jQuery and add filter functionality to the data list with PHP & MySQL. Here we have show how you can easily add a price range slider to the products list count using jQuery. You may also like How to Dynamic PHP and html form with qty price and total in table using JavaScript calculations.
HTML and jQuery Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 100, 300 ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
Price Range:<p id="amount"></p>
</p>
<div id="slider-range"></div>
<form method="post" action="">
<input type="hidden" id="amount1">
<input type="hidden" id="amount2">
<input type="submit" name="submit_range" value="Submit">
</form>
</body>
</html>PHP Code
<?php
if(isset($_POST['submit_range']))
{
$price1=$_POST['amount1'];
$price2=$_POST['amount2'];
$select = mysqli_query($con,"SELECT * FROM items WHERE price BETWEEN '$price1' AND '$price2'");
echo mysqli_num_rows($select);
}
?>
