Как обновить значения с помощью ползунка диапазона?

Question

Когда пользователь вводит значение в поле ввода, значения 1 & 2 не изменяются на веб-странице. Как я могу это решить?

<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

Вы можете использовать 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>