JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">

    price<br />
    <div class="slider" id="price"></div>
    quality<br />
    <div class="slider" id="quality"></div>
    <ul id="products">
            <li data-price="10" data-quality="20"> product - £10 q20</li>
            <li data-price="50" data-quality="40"> product - £50 q40</li>
            <li data-price="100" data-quality="80"> product - £100 q80</li>
            <li data-price="150" data-quality="30"> product - £150 q30</li>
            <li data-price="200" data-quality="40"> product - £200 q40</li>
        </ul>
    </div>

CSS

.demo{
margin:20px;
}

.demo div{
margin-bottom: 20px;
}

JavaScript

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}


$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        step: 1,
        values: [0, 250],
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 1);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 1);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };

    $("#price").slider(options);
    $("#quality").slider(options);

});