Creating Price Range Slider using jQuery in PHP with MySQL

In this tutorials we will create Jquery Ajax price range slider with PHP,Mysql .This is very useful for user that allow to filter data/items based on rang slider drag rather than typing price . Nowadays , this is quite common requirements for websites that have products to display or sell .

1) Create Database Table

This is a dynamic task, It fetch products from database .So, we need to have a database and a table . So, let's create a database first .We named 'ajax_example' Then table 'product' . Find below it's sql code . you can execute this sql code to create the table .

2) Create Database configuration file

Create a folder 'includes' then a php file 'config.php' to store server and database connection . Put below code .

3) Create Range Slider's html file

First of all we have to create a html file . We named it 'ajax_price_filter.html' . Download Jquery from www.jquery.com and Jquery UI from www.jqueryui.com Now call jquery and jquey UI as shown below

Note : call jquery above jquery-ui

4) Range Slider code

You can find Jquery range slider code from jquery official website https://jqueryui.com/slider/#range . From above page find 'view source' on bottom of the page . Click this link to expand the source code . Now copy and put these codes to initiate Jquery range slider as shown below .

 
 
 Price range:  
 
 
 
 

In above code we mentioned min and max value for the range slider to allow it's slider range . Similarly default opening range value on 'values' .

5) Ajax code to fetch products

Now we put some Jquery ,Ajax code to fetch products .

On above code , We have stored min and max value and created Query string . Then start Ajax request to send on php file i.e 'products.php' located inside 'ajax' folder . After getting output from the php file , we stored it to class 'content ' . Below code

Gives smooth fading effect when user drag range slider .

Find below complete code of ajax_price_filter.html

     
 
 Price range:  
 
 
 
   

6) Create Ajax PHP,Mysql file 'products.php'

Now create a folder 'ajax' then php file i.e products.php . Put below code

Above we get min and max price value . Queried to database's table 'product' then outputting with while loop . In this way we create Jquery Ajax range slider with PHP,Mysql . If you have any query ,write below on comment . I will try my best to reply soon .