Фильтрация товаров с помощью noUiSlider

Проблема такая, что мне нужно сделать так, чтобы карточки товаров (c ценой) фильтровались по диапазону значений поставленных самим пользователем в noUiSlider. Вот код (HTML):

     <ul class="shop__list">
      <li class="shop__list__item hoodie 3590">
        <a href="..//html/product1ENG.html">
          <picture>
            <source srcset="..//img/prod-1.jpg">
            <img src="..//img/prod-1.jpg" alt="" class="shop__list__item__img man">
          </picture>
          <picture>
            <source srcset="..//img/prod-1-woman.jpg">
            <img src="..//img/prod-1-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            Heartbreak Champs Oversized Hoodie In Green
          </div>
          <div class="shop__list__item__price">
            3,590.00 ₽
          </div>
        </a>
      </li>
      <li class="shop__list__item hoodie  3590">
        <a href="..//html/product2ENG.html">
          <picture>
            <source srcset="..//img/prod-2.jpg">
            <img src="..//img/prod-2.jpg" alt="" class="shop__list__item__img man">
          </picture>
          <picture>
            <source srcset="..//img/prod-2-woman.jpg">
            <img src="..//img/prod-2-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            Heartbreak Champs Oversized Hoodie In Black
          </div>
          <div class="shop__list__item__price">
            3,590.00 ₽
          </div>
        </a>
      </li>
      <li class="shop__list__item tee 2100">
        <a href="..//html/product3ENG.html">
          <picture>
            <source srcset="..//img/prod-3.jpg">
            <img src="..//img/prod-3.jpg" alt="" class="shop__list__item__img man ">
          </picture>
          <picture>
            <source srcset="..//img/prod-3-woman.jpg">
            <img src="..//img/prod-3-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            Team Play Oversized Tee in Black
          </div>
          <div class="shop__list__item__price">
            2,100.00 ₽
          </div>
        </a>
      </li>
      <li class="shop__list__item tee 2100">
        <a href="..//html/product4ENG.html">
          <picture>
            <source srcset="..//img/prod-4.jpg">
            <img src="..//img/prod-4.jpg" alt="" class="shop__list__item__img man">
          </picture>
          <picture>
            <source srcset="..//img/prod-4-woman.jpg">
            <img src="..//img/prod-4-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            Team Play Oversized Tee in White
          </div>
          <div class="shop__list__item__price">
            2,100.00 ₽
          </div>
        </a>
      </li>
      <li class="shop__list__item hoodie 3990">
        <a href="..//html/product5ENG.html">
          <picture>
            <source srcset="..//img/prod-5.jpg">
            <img src="..//img/prod-5.jpg" alt="" class="shop__list__item__img man">
          </picture>
          <picture>
            <source srcset="..//img/prod-5-woman.jpg">
            <img src="..//img/prod-5-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            ПАЛМ Oversized Sweatshirt in Green
          </div>
          <div class="shop__list__item__price">
            3,990.00 ₽
          </div>
        </a>
      </li>
      <li class="shop__list__item hoodie 3990">
        <a href="..//html/product6ENG.html">
          <picture>
            <source srcset="..//img/prod-6.jpg">
            <img src="..//img/prod-6.jpg" alt="" class="shop__list__item__img man">
          </picture>
          <picture>
            <source srcset="..//img/prod-6-woman.jpg">
            <img src="..//img/prod-6-woman.jpg" alt="" class="shop__list__item__img woman">
          </picture>
          <div class="shop__list__item__name">
            ПАЛМ Oversized Sweatshirt in Cinnamon
          </div>
          <div class="shop__list__item__price">
            3,990.00 ₽
          </div>
        </a>
      </li>
    </ul>

JS:

var slider = document.getElementById('slider');
var tooltipSlider = document.getElementById('slider-tooltips');

noUiSlider.create(slider, {
    start: [1450, 3000],
    connect: true,
    range: {
        'min': 1300,
        'max': 4000
    },
    step: 100,
    tooltips: true,
    format: {
        from: function(value) {
             return parseInt(value);
            },
        to: function(value) {
            return parseInt(value);
            }
        }
});

Как выглядит сама страница

Жду ответа!


Ответы (0 шт):