JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="range-slider"></div> <!-- ui jquery range slider-->

                        <!-- block of content -->
                        <div class="items">

                            <!-- first-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                            <!-- second-block -->
                            <div class="slider-content">
                                <span>lorem ipsum:</span>
                                <span class="price">30 000</span>
                            </div>

                        </div>

JavaScript

$("#range-slider").slider({
        max: 20,
        min: 4,
        step: 4,
change: function (event, ui) {
        $('.slider-content').hide();
        $('#slider_content_' + ui.value).show();
    });
});