<label>От</label>
<input type="text" id="val-year1" value="2017">
<ul class="years" id="sel1">
<li class="years-item min-year" data-year="2016">2016</li>
<li class="years-item min-year active" data-year="2017">2017</li>
<li class="years-item min-year" data-year="2018">2018</li>
<li class="years-item min-year" data-year="2019">2019</li>
<li class="years-item min-year" data-year="2020">2020</li>
</ul>
label>До</label>
<input type="number" id="val-year2" value="2019">
<ul class="years" id="sel2">
<li class="years-item max-year" data-year="2016">2016</li>
<li class="years-item max-year" data-year="2017">2017</li>
<li class="years-item max-year" data-year="2018">2018</li>
<li class="years-item max-year active" data-year="2019">2019</li>
<li class="years-item max-year" data-year="2020">2020</li>
</ul>let minYear;
let maxYear;
$('.min-year').click(function() {
$('.min-year').removeClass('active');
$(this).addClass('active');
minYear = $(this).data('year');
$('#val-year1').val(minYear);
});
$('.max-year').click(function() {
$('.max-year').removeClass('active');
$(this).addClass('active');
maxYear = $(this).data('year');
$('#val-year2').val(maxYear);
});
$('#val-year1').change(function() {
const min = +$(this).val();
$('#val-year2')
.val((i, v) => Math.max(v, min))
.children()
.show()
.filter((i, n) => +n.value < min)
.hide();
}).change();
Так же подскажите, пожалуйста, как сделать, чтобы при фильтрации во втором списке, если в списке больше нет активных, добавлялся класс aсtive первому по списку li?