JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>


<div id="slider"></div>
   
<ul>
                        <li class="prod" data-channels="3 4 6 8">product 1</li>
                        <li class="prod" data-channels="1">product 2</li>
                        <li class="prod" data-channels="2 8">product 3</li>
                        <li class="prod" data-channels="3 8">product 4</li>
                        <li class="prod" data-channels="3">product 5</li>
                        <li class="prod" data-channels="6">product 6</li>
</ul>

JavaScript

$("#slider").slider({
    value: 0,
    min: 0,
    max: 24,
    step: 1,
    slide: function(event, ui) {
        $("#amount").val(ui.value);

        var filter = ui.value;

        if (filter) {

            $('li.prod').each(function(index) {


                var channels = $(this).data('channels');

                if (channels == filter) {

                    $(this).fadeTo("fast", 1);

                } else {

                    $(this).fadeTo("fast", 0.3);

                }


            });
        }
    }
});
$("#amount").val($("#slider").slider("value"));