Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to Price Range Slider using jQuery, CSS, Mysql and PHP.

by
Category:php
php mysql html css
How to Price Range Slider using jQuery, CSS, Mysql and PHP.

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 and How to calculate total price using keyup function in jquery or javascript.

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);
}
?>

0 Comments


Html code work in comment box


Related Post