Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Price Range Slider Using jQuery,CSS and PHP.

Thursday, Sep 28, 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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.