Saturday, 18 February 2017

Using Range Slider as Search Filter in PHP Mysql Databse




PHP CODE

 <?php 

 global $mysqli;
$mysql_db_hostname = "localhost";
$mysql_db_user = "dbusername";
$mysql_db_password = "12345";
$mysql_db_database = "dbname";

 @$mysqli = new mysqli($mysql_db_hostname, $mysql_db_user, $mysql_db_password, $mysql_db_database);

 //Output any connection error
if ($mysqli->connect_error) {
    //die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}

 $range = $_POST['range'];
global $mysqli;
$data = '';
$query = "SELECT * FROM your_table_name WHERE price <= $range";
$result = $mysqli->query($query);
if ($result->num_rows > 0) {
    while( $row = $result->fetch_array(MYSQLI_ASSOC)){
    echo '<p>' . $row['item'] . '</p>';
    }
}else{
   echo $data;
}

 ?>

 HTML

 <html>

 <head>
    <title> Using Range Slider as Filter - www.hemant9807.blogspot.com </title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
</head>

 <body>
    <div class="container">
        <div class="mhead">
            <h1>Using Range Slider as Filter - www.hemant9807.blogspot.com</h1>
        </div>
        <div id="input-wrapper">
            <input type="range" id="rangeslider" min="0" max="50" value="20" oninput="updateOutput(value, true)" onchange="deactivate()" />
            <div id="reel">
                <div id="rn"></div>
            </div>
            <div id="static-output"></div>
        </div>
        <div id="products">
        </div>
    </div>

 </html>

 CSS

 body {
    padding-top: 50px;
    background: #26ace2;
    font-family: Verdana;
}

 h1 {
    font: normal 36px Verdana;
    ;
    color: white;
    padding: 50px;
    text-align: center;
    padding-bottom: 0;
}

 #input-wrapper {
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding-top: 64px;
    padding-bottom: 10px;
    overflow-x: hidden;
}

 #rangeslider {
    display: block;
    -webkit-appearance: none;
    outline: none;
    height: 5px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
}

 #rangeslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    height: 5px;
    width: 54px;
    position: relative;
}

 #rangeslider::-webkit-slider-thumb:after {
    content: '< >';
    word-spacing: 20px;
    text-align: center;
    background: hsl(140, 50%, 70%);
    font: bold 17px/25px Verdana;
    ;
    color: white;
    width: 54px;
    height: 25px;
    position: absolute;
    top: -10px;
    left: 0;
    color: transparent;
    transition: color 0.25s;
}

 #rangeslider::-webkit-slider-thumb:before {
    content: '';
    height: 5px;
    width: 400px;
    position: absolute;
    top: 0;
    right: 0;
    background: hsl(140, 50%, 70%);
    pointer-events: none;
}

 #reel {
    width: 54px;
    height: 54px;
    overflow: hidden;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 0.25s;
}

 #rn {
    background: linear-gradient(hsl(0, 80%, 70%), hsl(120, 80%, 70%));
    transition: all 0.25s;
}

 #rn span {
    font: 30px/54px Oswald;
    color: white;
    display: block;
    text-align: center;
}

 #static-output {
    font: bold 17px/25px Verdana;
    ;
    color: white;
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 54px;
    text-align: center;
    pointer-events: none;
    transition: color 0.25s;
}

 #products {
    width: 500px;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    font-size: 18px;
    background: rgba(34, 53, 39, 0.48);
    margin-top: 35px;
    display: none;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

 div#products p {
    margin: 5px 0;
    color: #fff;
}

 .active #reel {
    opacity: 1;
}

 .active #static-output {
    color: transparent;
}

 .active #rangeslider::-webkit-slider-thumb:after {
    color: white;
}

 .mhead {
    background-color: #009;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    text-align: center;
    font-family: Verdana;
    ;
    position: fixed;
    top: 0px;
    width: 100%;
}

 #input-wrapper {
    margin-top: 10%;
}

 #myad {
    margin: 60px auto;
    width: 768px;
}

 .mhead h1 {
    padding-top: 25px;
}
JS

 <script>
    var min = $("#rangeslider").attr("min");
var max = $("#rangeslider").attr("max");

 var rn = "";
for (var i = min; i <= max; i++)
    rn += "<span>" + i + "</span>";
$("#rn").html(rn);

 updateOutput($("#rangeslider").val(), false);

 var rfigure, h, v;

 function updateOutput(figure, activate) {
    if (activate)
        $("#input-wrapper").addClass("active");

     rfigure = Math.round(figure);
    $("#static-output").html(rfigure);

     h = figure / max * ($("#input-wrapper").width() - $("#reel").width()) + 'px';

     v = rfigure * $("#reel").height() * -1 + 'px';

     $("#static-output, #reel").css({
        left: h
    });
    $("#rn").css({
        transform: 'translateY(' + v + ') translateZ(0)'
    });
}

 function deactivate() {
    $("#input-wrapper").removeClass("active");
    var range = $('#rangeslider').val();
    $("#products").html('');
    $("#products").css('display', 'none');
    jQuery.ajax({
        type: "POST",
        url: 'data.php',
        data: {
            range: range
        },
        success: function(result) {
            if (result) {
                $("#products").html(result);
                $("#products").css('display', 'block');
            }
        }
    });

 } 
</script>
Posted by at

1 comment:

  1. Rocky Hardy23 October 2018 at 21:40

    ID-It.ca specialize in name plate manufacturers, sign labels, industrial tags, identification software, id products in Toronto, Ontario, Canada.

    ReplyDelete

Subscribe to: Post Comments (Atom)