January 6, 2014 9:58 am

How to create Price Range Slider in jQuery & PHP with MySQL

I have received many requests from my readers to create a price range slider, this article going to solve there problems so basically I used jQuery UI to perform this tutorial base which is jQuery and created a PHP and MySQL settings for ease of PHP Programmers so let see how it works and how to configure it in your websites. Mostly Developers use this slider in eCommerce sites where people can search products with price range.

How to create Price Range Slider in jQuery & PHP with MySQL

Database Details:

database name => phpgang
table name => like

db.sql
Database file run in your MySQL to create database and add data in table.

db.php

Edit this file as per your database credentials, I used MySQLi as you know MySQL is deprecated in latest version and will be removed. I suggest all developers to user MySQLi in your PHP applications instead of MySQL.

index.php

Contains HTML and PHP code to select records from database and show the products those come in the rang of given price.

In above code there is a range limit given min: 0max: 1000, minimum is 0 and maximum is 1000 you can edit it as per your requirement and also can make it dynamic like in database you have product with min price and product with max price both are on your websites requirement. values: [ <?php echo $min; ?>, <?php echo $max; ?> ] this jQuery line used to show current selected rage and in this tutorial i have selected 30 to 700 and you can chose your own.

In PHP code i used to get products from database in selected rage in demo I added 3 dummy products with different values.

jQuery UI library and jQuery library required to perform Slider navigation.

All files attached in download and provide a demo to view test it.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • Mawia HL

    Useful and great tutorial..

  • Arpit

    to make slider dynamic do we need to execute one more sql query
    For eg: select price from product order by desc limit 1 and echo the result for min value
    OR there is any other simpler way ??

    • huzoorbux

      Its upto you if you want to get price range from database as if you select max rage $1000 and you have recent product in database added is about $1200 then no one can be able to get that product in price range.

      • Arpit

        yes thats true. thank You so much .. keep writing such tutorials ..they really help 🙂

      • Arpit

        and you explain in very simple manner . good going PHPgang

  • Aish

    hi! Awesome work done! However, I can’t seem to download the code although I have subscribes. Can some one please help..Thank you!

  • Vishnu Priya

    article is so informative and so simple to understand.To learn more php projects online click on – http://netultimateschool.com/category/courses/php-courses/

  • Anuj

    How can use this slider for onchange event of input text box. I have tried it but it doesn’t work for on change event

    • huzoorbux

      you can call event on text box value change it might work for you.

  • Sachin S

    Hi i get this

    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:xampphtdocssliderindex.php on line 19 also slider is not displaying..

    Im using SQL not sqli

  • Danish Shaikh

    Dynamic image slider using Twitter Bootstrap & PHP with MySQL
    How to create Advanced Pagination in PHP & MySQL with jQuery
    How to create Like & Unlike System in PHP MySQL and jQuery
    How to Integrate live search in PHP and MySQL with jQuery

    if any one have this programs please send me in my mail id

    danish3056@gmail.com

  • Carlos Calderon

    is there a way to change the slider so it increments in 100 s ?

  • Mick

    Nice tutorial (again)! Thanks!!

  • Great Post with demo.

  • Nice post!