Фильтр цены товаров в виде красивого ползунка "от-до" в Тильде

Продолжаем модифицировать каталог Тильды. На этот раз преобразил фильтр цены.
Код высчитывает min и max значения ценовой величины и формирует диапазон.

Фильтр в виде ползунков работает со всеми блоками каталога товаров: ST300, ST305N, ST310N, ST315N, ST320N, ST330N и даже ST330!
Функционал нового фильтра:
  1. Ползунок, привязывается к стандартному фильтру Тильды "Цена", сам он скрывается (при добавлении новых товаров с большей/меньшей стоимостью диапазон автоматически увеличится до бОльшей/меньшей цены).
  2. При перетаскивании ползунка появляется 2я кнопка - Сбросить. И скрывается, если нажать на нее или перетащить ползунок на начальное состояние. Также можно вводить цифры в поле ввода.
  3. При выборе диапазона цены меняется название кнопки фильтров на выбранный диапазон. Например: левый ползунок на позиции 1000, нажимаем применить и название кнопки меняется на "от 1000 ₽". Или левый ползунок стоит на 2000, а правый на 8000, тогда название кнопки фильтра меняется на: 2000 - 8000 ₽

Попап и дропдаун:
  • На компьютере кнопка фильтра открывает дропдаун (плашка, появляющаяся под кнопкой фильтра),
  • На мобильной версии - попап. Он блокирует скролл и добавляет затемнение фона.
  • Закрытие попапа и дропдауна происходит по тапу на пустое пространство экрана. Также закрытие дропдауна происходит, если нажать на другой фильтр.

Еще про возможности фильтра:
  1. При загрузке страницы минимальный и максимальный пределы фильтров вычисляются автоматически по фактическим значениям цены. Так что если добавить новое значение больше текущего максимального, то будет пересчет фильтра и выставлен новый диапазон.
  2. Если пользователь возвращает ползунок в исходное положение (от = min, до = max), соответствующий фильтр автоматически сбрасывается. Остальные активные фильтры остаются нетронутыми.

Заказать разработку похожего функционала -https://t.me/Bortsov_Mt
Больше кода для Tilda в ТГ-канале
Поблагодари за код - подпишись https://t.me/breeze_tilda