Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
Вот рабочий вариант на первый случай.
Зависимости
В принципе все зависимости можно увидеть в разделе <head> - все подключенные файлы. Но на всякий случай.
Версия jQuery
jquery-1-12-3
Бегунок -
ion.rangeslider
Карусель -
owlcarousel2
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<script src="js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="css/ion.rangeSlider.skinHTML5.css">
<script src="js/ion.rangeSlider.js"></script>
<script src="js/owl.carousel.js"></script>
<link rel="stylesheet" href="css/owl.carousel.min.css">
</head>
<body>
<!-- Слайды с товарами -->
<div class="owl-carousel owl-theme">
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 150</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 200</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 600</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 130</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 76</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 420</span></h6>
</span>
</div>
</div>
<!-- Бегунок с диапазонами цен -->
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 100,
to: 400,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
var prise = document.querySelectorAll('.mid');
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR ', '');
if(elemPrise > from && elemPrise < to){
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='none';
}
}
});
});
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
</body>
</html>