Making a slider (range) update on slide HTML JavaScript

Question

I've got an html range element which updates a number on the page on the realise of the slider marker. I'm wondering if there is a way to make it update this number while it's being moved rather than when realised. This is the code I have:

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>

score 2 · Accepted Answer · answered Mar 26 '18 at 20:21

The input event does this on some browsers. (This answer states that IE does not support it.)

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>

@Si8: What, why? Does that capture the mouse? Because it does not seem to. — H.B., Mar 26 '18 at 20:29

Stys · Answer 2 · 2018-03-26T20:30:45.740

0

You can use oninput instead onchange

edited Mar 26 '18 at 20:30

answered Mar 26 '18 at 20:27

Stys

66
5

Making a slider (range) update on slide HTML JavaScript

2 Answers2