Skip to content

All topics  /  jQuery

Creating Price Range Slider Using JQuery In PHP With MySQL Example

jQuery ·

When “Creating Price Range Slider Using JQuery In PHP With MySQL Example” moves through design, development and browser testing, the full explanation can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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.

Output :

More on this topic