JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/css/ion.rangeSlider.skinFlat.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/js/ion.rangeSlider.min.js"></script>
<select id="sort_price">
  <option data-option-value="asc">From lower to higher</option>
  <option data-option-value="desc">From higher to lower</option>
</select>

<ul id="filter3">
    <li><input type="text" value=""></li>
</ul>

<input type="text" id="range" value="">



<div class="grid" id="container">
    <div class="grid-item red big">
        <p class="price">100</p>
    </div>
    <div class="grid-item green big">
        <p class="price">80</p>
    </div>
    <div class="grid-item blue big">
        <p class="price">90</p>
    </div>
    <div class="grid-item yellow big">
        <p class="price">60</p>
    </div>
    <div class="grid-item red medium">
        <p class="price">70</p>
    </div>
    <div class="grid-item green medium">
        <p class="price">50</p>
    </div>
    <div class="grid-item blue medium">
        <p class="price">60</p>
    </div>
    <div class="grid-item yellow medium">
        <p class="price">110</p>
    </div>
    <div class="grid-item red small">
        <p class="price">50</p>
    </div>
    <div class="grid-item green small">
        <p class="price">40</p>
    </div>
    <div class="grid-item blue small">
        <p class="price">20</p>
    </div>
    <div class="grid-item yellow small">
        <p class="price">30</p>
    </div>
</div>

CSS

.grid-item {
    float: left;
    margin: 10px;
    text-align: center;
    display: table;
}

.grid-item p {
    display: table-cell;
    vertical-align: middle;
}

.big {
    width: 150px;
    height: 150px;
}

.medium {
    width: 100px;
    height: 100px;
}

.small {
    width: 50px;
    height: 50px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

JavaScript

$(function() {
    var price = 0;
    var $container = $("#container");
    var $input = $("#filter3 input");
    var $sortPrice = $("#sort_price");
    var filters = [];

    $(".grid-item").addClass("show-me");
    filters.push(".show-me");

    $container.isotope({
        itemSelector: '.grid-item',
        getSortData: {
            number: '.price parseInt'
        },
        sortBy: 'number'
    });

    $sortPrice.on('change', function() {
        var order = $('option:selected', this).attr('data-option-value');
        var valAscending = (order == "asc");

        $container.isotope({
            itemSelector: '.grid-item',
            getSortData: {
                number: '.price parseInt'
            },
            sortBy: 'number',
            sortAscending: valAscending,
            filter: filters
        });

    });

    $input.on('keyup', function() {
        filters = [];
        filters.push(".show-me");
        filters.push($(this).val());
        filters = filters.join('');
        $container.isotope({
            filter: filters
        });

    });



    $("#range").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        min: 0,
        max: 150,
        from: 20,
        to: 110,
        type: 'double',
        step: 1,
        prefix: "&euro;",
        grid: true,
        onChange: function(data) {
            $(".grid-item").each(function() {
                price = parseInt($(this).find(".price").text(), 10);
                if (data.from <= price && data.to >= price) {
                    $(this).addClass('show-me');
                } else {
                    $(this).removeClass('show-me');
                }
            });
            $container.isotope({
                itemSelector: '.grid-item',
                filter: filters
            });
        }
    });


});