javascript - 在幻灯片 HTML JavaScript 上更新 slider (范围)

Question

我有一个 html range 元素，它更新 slider 标记实现上页面上的数字。我想知道是否有办法让它在移动时更新这个数字，而不是在意识到时更新。这是我的代码:

updateSlider();

function updateSlider() {
  document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value;
  document.getElementById('P1S_value').innerHTML = document.getElementById("P1S").value;
}

<h1>Player 1</h1>
<div class="slidecontainer">
  <h2 align="center">Health:</h2>
  <h3 align="center" id="P1H_value">100</h3>
  <input type="range" min="0" max="100" value="100" class="slider" id="P1H" onChange="updateSlider();">
  <h2 align="center">Shield:</h2>
  <h3 align="center" id="P1S_value">0</h3>
  <input type="range" min="0" max="100" value="0" class="slider" id="P1S" onChange="updateSlider();">
</div>

Answer 1

input 事件在某些浏览器上执行此操作。 ( This answer 表示 IE 不支持。)

updateSlider();

function updateSlider() {
  document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value;
  document.getElementById('P1S_value').innerHTML = document.getElementById("P1S").value;
}

<h1>Player 1</h1>
<div class="slidecontainer">
  <h2 align="center">Health:</h2>
  <h3 align="center" id="P1H_value">100</h3>
  <input type="range" min="0" max="100" value="100" class="slider" id="P1H"
     onchange="updateSlider();" oninput="updateSlider()">
  <h2 align="center">Shield:</h2>
  <h3 align="center" id="P1S_value">0</h3>
  <input type="range" min="0" max="100" value="0" class="slider" id="P1S"
     onchange="updateSlider();" oninput="updateSlider()">
</div>