How to update values with range slider?

Question

When a user types a value into the input box, Values 1 & 2 don't change on the web page. How do I solve this?

<p id="value1">Roll Below: 47.5</p>
<p id="value2">Multiplier: 2</p>   
<form>
    <input id="range" type="range" name="rangeInput" min="0.01" step="0.01" max="94" value="47.5" class="white" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">
    <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput"  oninput="rangeInput.value=amount.value" />
</form>

JS

function updateTextInput(val) {
    var value1 = document.getElementById("range").value;
    document.getElementById('value1').innerHTML = "Roll Below:   "+value1;

    var value2 = (0.95/value1 * 100).toFixed(2);
    document.getElementById('value2').innerHTML = "Multiplier:  "+value2;
}

DEMO: http://codepen.io/hokaien/pen/qRBgEg

Answer 1

You can use onkeyup:

function updateTextInput(val) {
  var value1 = document.getElementById("range").value;
  document.getElementById('value1').innerHTML = "Roll Below:   " + value1;

  var value2 = (0.95 / value1 * 100).toFixed(2);
  document.getElementById('value2').innerHTML = "Multiplier:  " + value2;
}

<p id="value1">Roll Below: 47.5</p>
<p id="value2">Multiplier: 2</p>
<form>
  <input id="range" type="range" name="rangeInput" min="0.01" step="0.01" max="94" value="47.5" class="white" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">
  <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput" onkeyup="updateTextInput(this.value);" oninput="amount.value=rangeInput.value" />
</form>