Creating Price Range Slider Using JQuery In PHP With MySQL Example

PHP 8 , PHP

Nicesnippets

1507

05-07-2021


Creating Price Range Slider Using JQuery In PHP With MySQL Example

Hi guys,

Today i will explained how to Creating Price Range Slider Using JQuery In PHP With MySQL. This example is so easy to use in php. This example to i am use to the jquery range slider and get to the price renge regarding to get all product records.

So let's start to the example.

Database Format


First to create a database table

CREATE TABLE `products` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`price` float(6,2) NOT NULL,

`created` datetime NOT NULL,

`modified` datetime NOT NULL,

`status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

dbconfig.php

<?php

$dbHost = "localhost";

$dbUsername = "root";

$dbPassword = "root";

$dbName = "login";

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

}

index.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Creating Price Range Slider Using JQuery In PHP With MySQL Example</title>

<style type="text/css">

.container{

padding: 20px;

}

.filter-panel{

width: 100%;

}

.filter-panel p{

margin-right:30px ;

float: left;

}

#productContainer {

float: left;

width: 100% ;

}

.list-item{

float: left;

width: 15%;

height: 80px;

padding: 10px;

border: 2px solid #333;

margin: 10px 10px 10px 0px;

}

.list-item h2{

margin: 0px;

}

</style>

<link rel="stylesheet" href="jquery.range.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="jquery.range.js"></script>

</head>

<body>

<h1>Creating Price Range Slider Using JQuery In PHP With MySQL Example</h1>

<div class="container">

<div class="filter-panel">

<p><input type="hidden" class="price_range" value="0" /></p>

<input type="button" onclick="filterProducts()" value="FILTER" />

</div>

<div id="productContainer">

<?php

include('dbConfig.php');

$query = $db->query("SELECT * FROM products ORDER BY created DESC");

if($query->num_rows > 0)

{

while($row = $query->fetch_assoc()){

?>

<div class="list-item">

<h2><?php echo $row["name"]; ?></h2>

<h4>Price: <?php echo $row["price"]; ?></h4>

</div>

<?php }

}else{

echo 'Product(s) not found';

}

?>

</div>

</div>

<script>

$('.price_range').jRange({

from: 0,

to: 500,

step: 1,

format: '%s',

width: 300,

showLabels: true,

isRange : true

});

</script>

<script>

function filterProducts() {

var price_range = $('.price_range').val();

$.ajax({

type: 'POST',

url: 'getProducts.php',

data:'price_range='+price_range,

beforeSend: function () {

$('.container').css("opacity", ".5");

},

success: function (html) {

$('#productContainer').html(html);

$('.container').css("opacity", "");

}

});

}

</script>

</body>

</html>

getProducts.php

<?php

if(isset($_POST['price_range']))

{

include('dbConfig.php');

$whereSQL = $orderSQL = '';

$priceRange = $_POST['price_range'];

if(!empty($priceRange)){

$priceRangeArr = explode(',', $priceRange);

$whereSQL = "WHERE price BETWEEN '".$priceRangeArr[0]."' AND '".$priceRangeArr[1]."'";

$orderSQL = " ORDER BY price ASC ";

}else{

$orderSQL = " ORDER BY created DESC ";

}

$query = $db->query("SELECT * FROM products $whereSQL $orderSQL");

if($query->num_rows > 0){

while($row = $query->fetch_assoc()){

?>

<div class="list-item">

<h2><?php echo $row["name"]; ?></h2>

<h4>Price: <?php echo $row["price"]; ?></h4>

</div>

}else{

echo 'Product(s) not found';

}

}

?>

Now you can check your own.

I hope it can help you...

Output :