Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Price Range Slider Using jQuery,CSS and PHP.

Sunday, Jan 8, 2017

Tags:- 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


See Demo
Price Range Slider Using jQuery


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email