Друзья, попросили сделать фильтр с ползунком, находится он тут:
https://muzeinauki.ru/tsenyi/
По сути он должен фильтровать мероприятия в зависимости от выбранного диапазона возрастов( возможно в каких то дивах ошибочно возраст установлен, но не в этом суть).
Сам я знаю только html и css, а вот в javascript не очень хорошо понимаю, поэтому я нашел готовый пример, и с горем пополам адаптировал его под нужный мне функционал. Проблема возникла, когда мне понадобился второй такой же блок с другими ценами. Я пробовал переименовывать идентификаторы, но в итоге оба ползунка фильтруют только контент второго блока.
вот работающий скрипт:
https://jsfiddle.net/kotboris/23pt560m/5/
а вот так я переименовал селекторы:
<script type="text/javascript">
function showProducts(minPrice, maxPrice) {
$("#products1 div").hide().filter(function() {
var price = parseInt($(this).data("price1"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
$(function() {
var options = {
range: true,
min: 3,
max: 11,
values: [3, 11],
slide: function(event, ui) {
var min = ui.values[0],
max = ui.values[1];
$("#amount1").val(min +"-" + max);
showProducts(min, max);
}
}, min, max;
$("#slider-range1").slider(options);
min = $("#slider-range1").slider("values", 0);
max = $("#slider-range1").slider("values", 1);
$("#amount1").val(min + " - " + max);
showProducts(min, max);
});
Простой
