✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Price Range Slider Using jQuery,CSS and PHP

Last Updated : Jul 1, 2023

IN - jQuery CSS PHP | Written & Updated By - Pragati

In this tutorial we will create a Price Range Slider Using jQuery,CSS and 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.

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.

I hope this tutorial on range slider jquery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪