CODEWITHSUNDEEP
javascripthtmlrange
fernando
fernando

Reputation: 99

Getting the value of range slider in HTML on change with JavaScript not working

I need to get the value of a range slider and put it on a label using only Javascript, I try to apply the solution I've seen during my research, but it doesn't get the value, instead it gets the text "[object HTMLInputElement]" on the label. what am I doing wrong?

This is the HTML code:

<html>
<body>
  <label id="output">0</label>
  <style>
    #output {
      background-color:yellow;
      font-size: 100;
    }
    </style>
    <input type="range" id="scale" onchange="run(this)">
      <style>
      #scale {
        width: 200;
      }
        </style>
        <script src="question.js" ></script>
</body>
</html>

this is the javascript:

function run(run) {
document.getElementById('output').innerHTML=run;
  }

Upvotes: 1

Views: 2259

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You need to use textContent instead if value - values are supposed to be for inputs and not labels.

Get the value like in your function => run.value and assign a textContent to your label. Using innerHTML is not a good practice to use since you are only adding a text in your label on slider change

Working Demo:

function run(run) {
  document.getElementById('output').textContent = run.value;
}
#output {
  background-color: yellow;
  font-size: 100;
}

#scale {
  width: 200;
}
<html>

<body>
  <label id="output">0</label>
  <input type="range" id="scale" onchange="run(this)">
</body>

</html>

Upvotes: 1

Related Questions