Range slider is very useful to add filter feature to the data list. Range slider is mostly used to filter data between two values. Mostly the price filter uses a range slider to filter items by price range in the web application. The price range slider allows the user to filter the record set by selecting the price range instead of entering the price manually.<\/p>\n
Price range filter functionality can be implemented in PHP using jQuery and Ajax. In this tutorial, we will create a price range slider using jQuery<\/b> and add filter functionality to the data list with PHP & MySQL. The price filter is a required feature in the product listing and the range slider is a perfect choice for a price filter. Here we’ll show how you can easily add a price range slider to the products list using jQuery in PHP and filter products by price range using jQuery, Ajax, PHP & MySQL.<\/p>\n
In this example script, the following functionality will be implemented to make a price range filter with slider in PHP<\/b>.<\/p>\n Before getting started integrating the price range filter in PHP<\/b>, take a look at the file structure.<\/p>\n To store the products data a table is required in the database. The following SQL creates a The Create Price Range Slider:<\/b> We will use jRange plugin to build a range slider using jQuery for selecting price range. The jRange is a lightweight jQuery plugin that helps to convert an input field to a range slider.<\/p>\n Use The HTML input field is defined in the next step, the element ID should be specified here as a selector ( Products List with Price Range Filter:<\/b>\n
price_range_slider_filter_in_php\/<\/span>\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 fetchProducts.php\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u251c\u2500\u2500 jquery.min.js\r\n\u2502 \u251c\u2500\u2500 jquery.range.js\r\n\u2502 \u2514\u2500\u2500 jquery.range.css\r\n\u2514\u2500\u2500 css\/<\/span>\r\n \u2514\u2500\u2500 style.css\r\n<\/pre>\nCreate Database Table<\/h2>\n
products<\/code> table with some basic fields in MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `products`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `price`<\/span> float<\/span>(6<\/span>,2<\/span>) NOT<\/span> NULL<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `modified`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nDatabase Configuration (dbConfig.php)<\/h2>\n
dbConfig.php<\/code> file is used to connect and select the MySQL database. Specify the database credentials, host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and database name ($dbName<\/code>).<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>?><\/span><\/pre>\nProducts List with Price Range Slider Filter (index.php)<\/h2>\n
\njQuery is used to create a range slider and initiate ajax request, so, include the jQuery library first.<\/p>\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.1\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"js\/jquery.range.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.range.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\njRange()<\/code> method to initiate jRange plugin and specify the input selector where the range slider will be attached.<\/p>\n\n
from<\/code> – Min value of the slider.<\/li>\nto<\/code> – Max value of the slider.<\/li>\nstep<\/code> – Interval between min and max values for each step (Default: 1).<\/li>\nformat<\/code> – Text format to display in pointer label (Default: %s).<\/li>\nwidth<\/code> – Slider width (Default: 300).<\/li>\nshowLabels<\/code> – Display pointer label (Default: true).<\/li>\nisRange<\/code> – Whether the slider represents a range (Default: false).<\/li>\n<\/ul>\n<script<\/span>><\/span>\r\n$(function<\/span>(<\/span>)<\/span>{\r\n $('#price_range'<\/span>).jRange({\r\n from<\/span>: 0<\/span>,\r\n to: 500<\/span>,\r\n step: 50<\/span>,\r\n format: '$%s USD'<\/span>,\r\n width: 300<\/span>,\r\n showLabels: true<\/span>,\r\n isRange : true<\/span>\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\n#price_range<\/code>).<\/p>\n
\nInitially, all the products are fetched from the database and listed on the web page. Also, a price range slider is added to the list for filtering the products by price.<\/p>\n\n
filterProducts()<\/code>) to filter records via Ajax.<\/li>\n<div<\/span> class<\/span>=\"search-panel\"<\/span>><\/span>\r\n <p<\/span>><\/span><input<\/span> type<\/span>=\"hidden\"<\/span> id<\/span>=\"price_range\"<\/span> value<\/span>=\"0,500\"<\/span>><\/span><\/p<\/span>><\/span>\r\n <button<\/span> onclick<\/span>=\"filterProducts()\"<\/span> class<\/span>=\"btn btn-outline-primary\"<\/span>><\/span>Filter Products<\/button<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<div<\/span> id<\/span>=\"productContainer\"<\/span>><\/span>\r\n<?php
<\/span>\/\/ Include database configuration file
<\/span>include <\/span>\"dbConfig.php\"<\/span>;
<\/span>\/\/ Fetch products from database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM products WHERE status = 1 ORDER BY created DESC\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>?><\/span>\r\n <div<\/span> class<\/span>=\"list-item\"<\/span>><\/span>\r\n <h2<\/span>><\/span><?php <\/span>echo <\/span>$row<\/span>[<\/span>\"name\"<\/span>]; <\/span>?><\/span><\/h2<\/span>><\/span>\r\n <h4<\/span>><\/span>Price: $<?php <\/span>echo <\/span>$row<\/span>[<\/span>\"price\"<\/span>]; <\/span>?><\/span>