Búsqueda por rango de precios utilizando jQuery Slider

Habitualmente, jQuery UI Slider se utiliza para seleccionar un rango máximo y mínimo y realizar operaciones basadas en dichos rangos como la búsqueda, validación y demás... Los rangos min-max se establecen utilizando los dos controles que se pueden arrastrar del elemento de jQuery. Una vez establecidos los rangos mínimo y máximo, se resalta el área seleccionada entre los dos controles que se pueden arrastrar.

Utilizaremos el slider de rango de jQuery para seleccionar un rango de precios. Basándonos en el rango de precios seleccionado, filtraremos productos que tenemos en nuestra base de datos. Mientras que el usuario arrastre los controladores de mínimo y máximo, se mostrará a su vez en los cuadros de texto que hay cercanos a dichos controladores el valor de cada rango. Así mismo, el usuario también puede ingresar manualmente el valor que quiera de minimo y maximo en las cajas de texto para que el slider se ajuste automáticamente.

HTML de nuestro slider de rangos

Este código HTML contiene un contenedor que será reemplazado por nuestro slider de rangos. Con la referencia de este elemento, llamaremos al slider de jQuery UI para mostrar el slider con los rangos min-max por defecto. Como he comentado antes, al arrastrar los controladores de mínimo y máximo, se actualizarán los valores de las cajas de texto.

<link rel="stylesheet"
    href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-price-range-filter">
    <form method="post" action="">
        <div>
            <input type="" id="min" name="min_price"
                value="<?php echo $min; ?>">
            <div id="slider-range"></div>
            <input type="" id="max" name="max_price"
                value="<?php echo $max; ?>">
        </div>
        <div>
            <input type="submit" name="submit_range"
                value="Filter Product" class="btn-submit">
        </div>
    </form>
</div>

Código para filtrar los productos en la base de datos basándonos en el rango de precios

Este código PHP recibe un rango de precio con un mínimo y un máximo a través del campo input que hemos definido en nuestro formulario HTML. Mediante estos rangos, crearemos nuestra query para filtrar la información de los productos de nuestra base de datos. Una vez hecho esto, recorreremos el array y mostraremos los productos en una tabla HTML.

<?php

$conn = mysqli_connect("localhost", "root", "test", "phpsamples");

$result = mysqli_query($conn, "select * from tbl_product where price BETWEEN '$min' AND '$max'");

$count = mysqli_num_rows($result);
if ($count > 0) {
    ?>
<hr>
    <div class="container">
        <table class="tutorial-table" cellspacing="1px" width="100%">
            <tr>
                <th>Product name</th>
                <th>Code</th>
                <th class="text-right">Price (in $)</th>
            </tr>
     <?php
    while ($row = mysqli_fetch_array($result)) {
        ?>
    
        <tr>
                <td><img class="product-thumb" src="<?php echo $row['image']; ?>" /><?php echo $row['name']; ?></td>
                <td><?php echo $row['code']; ?></td>
                <td class='text-right'><?php echo $row['price']; ?></td>
            </tr>
<?php
    } // end while
} else {
    ?>
<div class="no-result">No Results</div>
<?php
}

mysqli_free_result($result);

mysqli_close($conn);
echo $output;

?>