Поле ввода диапазона возвращает неверный результат

Question

Здесь три диапазона часовых поясов ввода Пакистан, Афганистан и Индия здесь смещение часового пояса в секундах

location       offset seconds
pakistan       18000
afghanistan    16200
indian         19800

диапазон ввода от 1 до 24 часов

, когда я нажимаю на любом входе, диапазон отображаетвсе время в соответствии с их часовым поясом.

Но проблема в том, что когда я нажимаю на временной диапазон ввода Афганистан или Индия, он возвращает неправильное время.когда я нажимаю «конец» диапазона ввода (в среднем 24 часа), он возвращается на 30 минут позже исходного значения

$("#comission div").on("click", "input", function() {
  var value = parseInt($(this).val())
  var hours1 = Math.floor(value / 60);
  var minutes1 = value - (hours1 * 60);
  var targetTime = new Date(0);
  targetTime.setMinutes(minutes1);
  targetTime.setHours(hours1);
  if (value > 1430) {
    targetTime.setMinutes(59);
    targetTime.setHours(23)
  }
  var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
  $('#comission .time').each(function() {
    var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
    var tzDifference = (parseInt(timeZoneFromDB) / 60) + targetTime.getTimezoneOffset();
    var date = new Date(targetTime.getTime() + tzDifference * 60000);
    var totallv = parseInt(date.getHours() * 60) + date.getMinutes();
    $(this).find('.tooltip').css('margin-left', totallv / 3);
    $(this).find('.tooltip').html(date.getHours() + ':' + date.getMinutes());
    $(this).find('.comissionLabel').html(date.getHours() + ':' + date.getMinutes());
    $(this).find('.custom-range').val(totallv)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <br><br><br> <br><br><br>
  <div id="comission" class="col-md-6 col-md-offset-2">

    <div class="col-md-12 mb-3 44 time">afghanistan
      <span class="comissionLabel" data-offset='16200'>time: </span>

      <input class="custom-range" value="60" type="range" min="0" max="1440" step="15">
    </div>
    <div class="col-md-12 mb-3 45 time"> Pakistan
      <span class="comissionLabel" data-offset='18000'>time: </span>

      <input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
    </div>
    <div class="col-md-12 mb-3 46 time">indian
      <span class="comissionLabel" data-offset='19800'>time: </span>

      <input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
    </div>
  </div>
</div>