HTML input[type=range] 即使收到值更改也不会更改外观

Question

我正在用 Howler.js 和 Javascript/JQuery 制作歌曲播放器。

我有一个显示歌曲进度的输入[type=range]：

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

有一个函数在播放歌曲时执行：

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

这确实有效，输入 [type=range] 的进度明显改变。但是，当我手动单击 input[type=range] 时， input[type=range] 内部的值属性仍然会发生变化，但显然它被卡住了。我使用这种方法手动更改歌曲进度：

$('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 + ')');
});

提前致谢

Answer 1

请考虑以下示例。这使用 .val() 而不是 .attr() 并且会有更好的结果。

$(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">

HTML input[type=range] 即使收到值更改也不会更改外观

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

javascript

html

jquery

howler.js