✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Price Range Slider Using jQuery,CSS and PHP

Last Updated : Apr 15, 2022

IN - jQuery CSS PHP

Price Range slider is a slider having price on it means instead of entering the price user can also slide the meter to the appropriate price range and submit the price.

Price Range Slider is very common in modern websites they are mainly used in ecommerce websites to give easy user experiance.

In this tutorial we will create a Price Range Slider Using jQuery,CSS and PHP.You may also like Image Slideshow With Previous And Next Button Using jQuery

Price Range Slider Using jQuery,CSS and PHP

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Price Range Slider it takes only Two steps:-

  1. Make a HTML file and define markup and script for price slider
  2. Make a PHP file to fetch the data from database

Step 1. Make a HTML file and define markup and script for price slider

We make a HTML file and save it with a name slider.html 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="jquery-ui.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="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="get_items.php">
    <input type="hidden" id="amount1">
    <input type="hidden" id="amount2">
    <input type="submit" name="submit_range" value="Submit">
  </form>

</body>
</html>

Before you begin you have to download jquery-ui.js and jquery-ui.css file. We made a div for slider and a form where we store both the amounts in hidden fields.You may also like Content Slider Using jQuery

Step 2. Make a PHP file to fetch the data from database

We make a PHP file named get_items.php 

<?php
if(isset($_POST['submit_range']))
{
	$price1=$_POST['amount1'];
	$price2=$_POST['amount2'];
	
	mysql_connect('localhost','root','');
    mysql_select_db('demo');

    $select = mysql_query("select * from sample_items where price BETWEEN '$price1' AND '$price2'");
	echo mysql_num_rows($select);
}
?>

In this step we get both the prices and then query the database to fetch the total items which is under the price range.

Thats all, this is how to Create Price Range Slider Using jQuery,CSS And PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials