Using the value input to a programmatic range slider

Question

I've made these two programmatic range slider where the user may either select the value by sliding the bar or typing a number into the box. (I'm sure there's a more efficient method but I'm just learning)

However, when I try to use the value in the box for an addition it is returning NAN. I thought this was simply because it was using a string value, but even with the parseFloat function it is not displaying correctly.

How should I be referring to these variables outside the "function (thicknessA/B)" in order to use them in mathematical operations?

Thanks.

<html>
  <body>
        <h3> Thickness A</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
          </input>
          <br>
          <p> Thickness A is:
          <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
         </input>
              <span>mm</span></p>

        <h3> Thickness B</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1"
            oninput="thicknessB(this.value)"
            onchange="thicknessB(this.value)">
          <br>
          <p>Thickness B is:
          <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1"
          oninput="thicknessB(this.value)"
          onchange="thicknessB(this.value)"> </input>
          <span>mm</span></p>

          <h4>Your total is: <span id="total"></span>

        <script>
        var uno;
        var dos;
        var addition;

        function thicknessA(newthicknessA)
            {
            document.getElementById('thicknessARange').value = newthicknessA;
            document.getElementById('thicknessANumber').value = newthicknessA;
            uno = document.getElementById('thicknessANumber').value;
            }
        function thicknessB(newthicknessB)
            {
            document.getElementById('thicknessBRange').value = newthicknessB;
            document.getElementById('thicknessBNumber').value = newthicknessB;
            dos = document.getElementById('thicknessBNumber').value;
            }

         addition = parseFloat(uno) + parseFloat(dos) ;
         document.getElementById("total").innerHTML= addition;

         </script></body></html>

Also is it correct to use both the "oninput" and "onchange" events to support different broswers or is it unnecessary? — James, Aug 26 '18 at 15:02

score 0 · Accepted Answer · answered Aug 26 '18 at 15:26

I have a few comments that will hopefully help you out here. The reason why you are getting NaN is two fold.

You have no initial value for uno/dos, so they are both undefined to begin.

In Javascript:

parseFloat(undefined) = NaN (Not a number)

You never reset the value of addition after each value change, so addition remains NaN the whole time.

You can try something like this to illustrate these points:

```

<h3> Thickness A</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)"></input>
<br>
<p> Thickness A is:
  <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)">
  <span>mm</span></p>

<h3> Thickness B</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
<br>
<p>Thickness B is:
  <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
  <span>mm</span></p>

<h4>Your total is: <span id="total"></span></h4>

<script>
var uno = 0;
var dos = 0;
var addition;

function thicknessA(newthicknessA) {
  document.getElementById('thicknessARange').value = newthicknessA;
  document.getElementById('thicknessANumber').value = newthicknessA;
  uno = document.getElementById('thicknessANumber').value;
  calculateTotal();
}

function thicknessB(newthicknessB) {
  document.getElementById('thicknessBRange').value = newthicknessB;
  document.getElementById('thicknessBNumber').value = newthicknessB;
  dos = document.getElementById('thicknessBNumber').value;
  calculateTotal();
}

function calculateTotal() {
  addition = (parseFloat(uno) + parseFloat(dos));
  document.getElementById("total").innerHTML = addition;
}

calculateTotal();
</script>

```

For your html, some style points:

You can use self closing tags for your input tags.
You have a floating tag that should be closed ()

Re: onchange/oninput browser support:

It looks like IE might have some problems with onInput: https://caniuse.com/#search=range
You may want to check other threads where people are talking about the handlers specifically (like this one: onchange event on input type=range is not triggering in firefox while dragging), but be sure to check the dates on the responses in case the information is outdated.

Using the value input to a programmatic range slider

1 Answers1