JSFiddle - React, Tailwind, and code Playground

by Boris Shpakovsky

HTML

<link rel="stylesheet" href="https://muzeinauki.ru/wp-content/ui-slider/jquery-ui.css">
<script src="https://muzeinauki.ru/wp-content/ui-slider/jquery.min.js"></script>
<link rel="stylesheet" href="https://muzeinauki.ru/wp-content/themes/vantage-child/style.css">
<script src="https://muzeinauki.ru/wp-content/ui-slider/jquery-ui.min.js"></script>
<script>
$('.ui-slider-handle').draggable();
</script>
<script>jquery.ui.touch-punch.min.js</script>
<div class="demo">

    <p>
        <label for="amount">Возраст (лет)</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider-range"></div>
    <div id="products">
<!-- ЯПМ -->
<div data-price="3,4,5,6,7" class="price-t">
<ul class="price-title">
<li><h2>Я познаю мир (ЯПМ)</h2></li>
<li><p>(10 опытов<br /> без сухого льда и жидкого азота)</p></li>
<hr noshade width="30%"/>
<li><h2>до 15 чел.</h2></li>
</ul>
<ul class="price-price">
<li><h1>3000</h1><br />руб./чел.<br /><p>Свыше 15 чел. + 150р./чел.</p></li>
</ul>
<hr noshade/>
<ul class="price-feat">
<li><p>Возраст</p></li>
<li>3-7 лет</li>
</ul>
<hr noshade/>
<ul class="price-feat">
<li><p>Длительность</p></li>
<li>60 минут</li>
</ul>
<li class="line"></li>
</div>
<!-- ВМ -->
<div data-price="3, 4, 5, 6, 7" class="price-t">
<ul class="price-title">
<li><h2>Волшебный мир (ВМ)</h2></li>
<li><p>(10 опытов,<br /> включая опыты с сухим льдом или жидким азотом)</p></li>
<hr noshade width="30%"/>
<li><h2>до 15 чел.</h2></li>
</ul>
<ul class="price-price">
<li><h1>4000</h1><br />руб./чел.<br /><p>Свыше 15 чел. + 150р./чел.</p></li>
</ul>
<hr noshade/>
<ul class="price-feat">
<li><p>Возраст</p></li>
<li>3-7 лет</li>
</ul>
<hr noshade/>
<ul class="price-feat">
<li><p>Длительность</p></li>
<li>60 минут</li>
</ul>
<li class="line"></li>
</div>
<!-- КШ -->
<div data-price="3, 4, 5, 6, 7" class="price-t">
<ul class="price-title">
<li><h2> Крио шоу (ВМ) </h2></li>
<li><p>(10 опытов<br /> с сухим льдом или жидким...

JavaScript

function showProducts(minPrice, maxPrice) {
    $("#products div").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 3,
        max: 11,
        values: [3, 11],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val(min +"-" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val(min + " - " + max);

    showProducts(min, max);
});