Как отфильтровать зависимые списки?

Question

TuMko @TuMko

JavaScript

Как отфильтровать зависимые списки?

Есть два списка. При клике по каждому li из списке передается значение в соответствующий input. Списки представляют собой что-то вроде range. Первый список является минимальным значением, второй - максимальным. Поэтому после клика на li в 1м списке, значение сравнивается со значением из второго списка, и если оно больше, то все значения из второго списка, которые меньше, необходимо скрыть.

<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>

Реализация JS:

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))
      .next()
      .children()
      .show()
      .filter((i, n) => +n.dataset.year < min)
      .hide();
  }).change();

При клике по элементам списка значения не сразу меняются, а только после того, как в input внести изменения с клавиатуры, к примеру поставить пробел (если input type=text). Похоже, что input как-то не сразу отслеживает изменения .change().
Так же подскажите как сделать, чтобы при фильтрации во втором списке, если в списке больше нет активных, добавлялся класс aсtive первому по списку li?

https://codepen.io/TuMko/pen/PoGZWdX