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

Possible duplicated: http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging — Rafa Romero, Jan 04 '17 at 10:10

Ionut Necula · Accepted Answer · 2017-01-04T10:30:50.470

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>

edited Jan 04 '17 at 10:30

answered Jan 04 '17 at 10:06

Ionut Necula

11,107
4
45
69

When you type 2 digits into the input, it only updates the first digit. – Jan 04 '17 at 10:08
@kaien, what do you mean? It works fine for both values even when you type 2 digits in the input. Do a `console.log(value1);` to see it changing. Also you can see it changing in real time. – Ionut Necula Jan 04 '17 at 10:14
@lonut eg. when you type 10 into the input, even though value 1 & slider updates, Value 1 on the webpage remains the same. – Jan 04 '17 at 10:17
@kaien, Okay, I hope I understood you now. See my updated answer. I've changed `onkeypress` with `onkeyup`. It should work now. I hope it helps. – Ionut Necula Jan 04 '17 at 10:31
@lonut Would there be a way to update Value 2 with a input as well? Thanks for the help! – Jan 04 '17 at 10:53
@kaien, it is possible, but that will mess with your code, because now you are calculating the second value based on the first value and doing some calculation. But if you want to add a second input you can. The principle remains the same. – Ionut Necula Jan 04 '17 at 11:07

How to update values with range slider?

1 Answers1