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

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


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.


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: