Using Range Slider as Search Filter in PHP

Hi guys, few users requested us to create a slider as filter script. As you will see on most of the ecommerce sites a slider is used as filter and searching purposes. An example would be a price slider where you adjust slider value and it displays the result based on slider value in run time. It creates a very good user experience and allows user to filter and search easily on the run time. We have created a similar tutorial where you can adjust slider value by dragging it and results would be displayed on run time. We found a very cool range slider UI in TheCodePlayer’s site, they also have some really cool frontend stuffs so please go and check them out 🙂


So we have taken UI code from TheCodePlayer tutorial and have just added PHP  and a little jQuey code for rest of the task of filtering and displaying search results based on slider value/position. You can check the live demo here.

So download the code and you will see data.php file where you will have to edit credentials for database connection and it fetches the search result. Below the code for it:

Also we have index.html to display the slider and search results. You can modify it as per your wish. Then we have script.js file inside /js directory which does the magic via Ajax call by taking data from data.php

This post is just a sample of how search filter could work with range slider. You can do more complex things like combining mutiple range sliders and display results based on multiple search criteria etc.

Please share this post with your friends and followers, its always good to share 🙂


About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

One thought on “Using Range Slider as Search Filter in PHP

Comments are closed.