HTML input[type=range] does not change appearance even tho it receives value-change

I am making a song-player with Howler.js and Javascript/JQuery.

I have an input[type=range] which displays the progress of the song:

<input class="duration" type="range" value="0">

There is a function that executes when the song is played:

onplay: function() {
    setInterval(function(){
        $('#everytime_we_touch .duration').attr('value', everytime_we_touch.seek());
    },1000);
}

This does work and the progress on the input[type=range] visibly changes. However, when I click on the input[type=range] manually, the value-attribute inside of the input[type=range] still changes, but visibly it is stuck. I use this method for manually changing the song-progress:

$('input[type=range].duration').on('input', function () {
    let howl_name = $(this).parent().parent().parent().attr('id');
    let duration_value = this.value;
    eval(howl_name + '.seek(' + duration_value + ')');
});

Thanks in advance

Solution

Please consider the following example. This uses .val() instead of .attr() and will have better results.

$(function() {
  var timer;
  var start;

  function updateDuration(n) {
    $(".current").val(n);
    $(".duration").val(n);
  }

  $(".psudeo-player button").click(function() {
    $(this).hide();
    start = new Date().getSeconds();
    timer = setInterval(function() {
      var t = Math.floor(new Date().getSeconds() - start);
      updateDuration(t);
      if (t >= parseInt($(".duration")[0].max)) {
        clearInterval(timer);
        $(this).show();
      }
    }, 1000);
  });
});

.psudeo-player {
  background-color: #555;
  border: 1px solid #222;
  width: 480px;
  height: 340px;
  position: relative;
}

.psudeo-player button {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 30px);
}

.current {
  width: 2em;
}

.duration {
  width: 430px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="psudeo-player">
  <button>Play</button>
</div>
<input type="text" class="current" value="0" disabled><input class="duration" min="0" max="20" type="range" value="0">