Фильтрация товаров с помощью 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);
}
}
});
Жду ответа!
