Вопрос? Реализация фильтра

Приветствую, не могу понять как реализовать такой фильтр, какие модули для этого нужны или возможно без них (dle 14)

Код:

<div class="menu__wrapper">
    <!-- filter -->
    <div class="filter">
        <div class="filter__content">
            <!-- filter item -->
            <div class="filter__item" id="filter__quality"> <span class="filter__item-label">ТИП:</span>
                <div class="filter__item-btn dropdown-toggle" role="navigation" id="filter-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <input type="button" value="Фильм">
                    <a href="#" class="menu-trigger"> <span></span> <span></span> <span></span> </a>
                </div>
                <ul class="filter__item-menu dropdown-menu scrollbar-dropdown" aria-labelledby="filter-type">
                    <li>ФИЛЬМ</li>
                    <li>СЕРИАЛ</li>
                </ul>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__genres"> <span class="filter__item-label">ЖАНРЫ:</span>
                <div class="filter__item-btn dropdown-toggle" role="navigation" id="filter-genres" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <input type="button" value="Безумие">
                    <a href="#" class="menu-trigger"> <span></span> <span></span> <span></span> </a>
                </div>
                <ul class="filter__item-menu dropdown-menu scrollbar-dropdown" aria-labelledby="filter-genres">
                    <li>Безумие</li>
                    <li>Боевые искусства</li>
                    <li>Вампиры</li>
                    <li>Военное</li>
                    <li>Гарем</li>
                    <li>Драма</li>
                    <li>Игры</li>
                    <li>Исторический</li>
                    <li>Комедия</li>
                    <li>Космос</li>
                    <li>Магия</li>
                    <li>Машины</li>
                    <li>Меха</li>
                    <li>Музыка</li>
                    <li>Пародия</li>
                    <li>Повседневность</li>
                    <li>Полиция</li>
                    <li>Приключения</li>
                    <li>Психологическое</li>
                    <li>Романтика</li>
                    <li>Сверхъестественное</li>
                    <li>Спорт</li>
                    <li>Супер сила</li>
                    <li>Триллер</li>
                    <li>Ужасы</li>
                    <li>Фантастика</li>
                </ul>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__season"> <span class="filter__item-label">СЕЗОН:</span>
                <div class="filter__item-btn dropdown-toggle" role="navigation" id="filter-season" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <input type="button" value="Зима 2022">
                    <a href="#" class="menu-trigger"> <span></span> <span></span> <span></span> </a>
                </div>
                <ul class="filter__item-menu dropdown-menu scrollbar-dropdown" aria-labelledby="filter-season">
                    <li>Зима 2022</li>
                    <li>Осень 2021</li>
                    <li>Лето 2021</li>
                    <li>2019</li>
                    <li>2018</li>
                    <li>2017</li>
                    <li>2005-2016</li>
                </ul>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__rate"> <span class="filter__item-label">SHIKI:</span>
                <div class="filter__item-btn dropdown-toggle" role="button" id="filter-rate" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="filter__range">
                        <div id="filter__shiki-start"></div>
                        <div id="filter__shiki-end"></div>
                    </div>
                </div>
                <div id="filter__shiki"></div>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__rate"> <span class="filter__item-label">W-Art:</span>
                <div class="filter__item-btn dropdown-toggle" role="button" id="filter-rate" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="filter__range">
                        <div id="filter__wa-start"></div>
                        <div id="filter__wa-end"></div>
                    </div>
                </div>
                <div id="filter__wa"></div>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__year"> <span class="filter__item-label">ГОДА:</span>
                <div class="filter__item-btn dropdown-toggle" role="button" id="filter-year" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="filter__range">
                        <div id="filter__years-start"></div>
                        <div id="filter__years-end"></div>
                    </div>
                </div>
                <div id="filter__years"></div>
            </div>
            <!-- end filter item -->
            <!-- filter item -->
            <div class="filter__item" id="filter__asc"> <span class="filter__item-label">СОРТИРОВАТЬ:</span>
                <div class="filter__item-btn dropdown-toggle" role="navigation" id="filter-asc" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <input type="button" value="По убыванию">
                    <a href="#" class="menu-trigger"> <span></span> <span></span> <span></span> </a>
                </div>
                <ul class="filter__item-menu dropdown-menu scrollbar-dropdown" aria-labelledby="filter-asc">
                    <li>По убыванию</li>
                    <li>По возрастанию</li>
                </ul>       
            </div>
            <!-- end filter item -->
        </div>
    </div>
    <!-- end filter -->
</div>