How to get range input value on input box?

Question

I'm using js to get value from the range slider. now I wanted to show that in the input box.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

 <input type="range" min="1" max="10"  name="ans" class="slider" id="myRange">
 value:<p><span id="demo"></p>

NEED THE VALUE TO BE SHOWN IN THE INPUT BOX

There is no "input box" in your code. There's a `span`, which does show the value. What specific problem are you having? — T.J. Crowder, Sep 12 '19 at 06:25
https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value Does this question answer your question? — Gosi, Sep 12 '19 at 06:25
It is same as how you are doing with span. Only difference is you have to use `value` instead of `innerHTML` — Aditya, Sep 12 '19 at 06:25
leave the span tag. add html input box. and i wanted to show the values on input box same as i get from "id=demo" - 'span' tag or 'p' tag. thankyou — teenage vampire, Sep 12 '19 at 06:34
still can't find the solution checkout my code on code pen -> https://codepen.io/ajitstark/pen/jONKeej?editors=1010#0 — teenage vampire, Sep 13 '19 at 14:54

Viral · Answer 1 · 2019-09-17T13:24:33.567

2

You just need some minor changes.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var inputItem = document.getElementById("outputPounds");
output.innerHTML = slider.value;
weightConverter(slider.value);
slider.oninput = function() {
  output.innerHTML = this.value;
  weightConverter(slider.value);
}

function weightConverter(valNum) {
  inputItem.value=valNum*2.2046;
}

<input type="range" min="1" max="200" name="ans" class="slider" 
 id="myRange">

 <p class="agecls">Weight:<span id="demo" style="text-decoration:underline" 
 oninput="weightConverter(this.value)" 
 onchange="weightConverter(this.value)"></span></p>

 <p>Pounds: <input type="text" value="0" id="outputPounds"></p>

edited Sep 17 '19 at 13:24

answered Sep 12 '19 at 06:26

Viral

935
1
9
22

still can't find the solution checkout my code on code pen -> https://codepen.io/ajitstark/pen/jONKeej?editors=1010#0 – teenage vampire Sep 13 '19 at 14:58
Please run the above code. I have updated it. Please let me know if you are still getting an issue. @teenagevampire – Viral Sep 17 '19 at 13:26

ankit singh · Answer 2 · 2019-09-13T15:28:14.587

0

Please update the code by this

    <input type="range" min="1" max="200" name="ans" class="slider" id="myRange">
    <p class="agecls">Weight:<span id="demo" style="text-decoration:underline"></span></p>
    <p>Pounds: <span id="outputPounds"></span></p>

    <script type="text/javascript">

    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;
    weightConverter(slider.value)
    slider.oninput = function() {
      output.innerHTML = this.value;
      weightConverter(this.value)
    }


    function weightConverter(valNum) {
      document.getElementById("outputPounds").innerHTML=valNum*2.2046;
    }
    </script>

edited Sep 13 '19 at 15:28

answered Sep 12 '19 at 06:30

ankit singh

565
3
8

still can't find the solution checkout my code on code pen -> https://codepen.io/ajitstark/pen/jONKeej?editors=1010#0 – teenage vampire Sep 13 '19 at 14:58
I have updated the code please try updated code again . It would be solve your prob . if still any issue please let me know thank you :) – ankit singh Sep 13 '19 at 15:28
works fine. i'm just updated little bit for two decimal places. thankyou – teenage vampire Sep 18 '19 at 10:04

score 0 · Answer 3 · answered Sep 14 '19 at 00:03

Your entire code could be simplified to a function which reads the input value and updates each of the two places where you want to display the value in either metric or imperial system.

Placing everything inside one function enables you to bind the execution of this function on two events:

a) on window.onload event (so the conversion and display are done when page loads);
b) on input.oninput event, so they are also done when you slide. Note that change event only fires once you release the slider while input event fires when a slider value input has been detected, irrespective of input method (keyboard, mouse, touch, etc...).

Working example:

const updateValues = function() {
  let inputValue = document.querySelector('#myRange').value;
  document.querySelector('#outputKg').innerHTML = inputValue;
  document.querySelector('#outputLbs').innerHTML = Math.round(inputValue * 220.462262) / 100;
}
window.onload = updateValues;
document.querySelector('#myRange').oninput = updateValues;

<input type="range" min="1" max="200" name="ans" class="slider" id="myRange">
<p>Weight: <span id="outputKg"></span></p>
<p>Pounds: <span id="outputLbs"></span></p>

How to get range input value on input box?

3 Answers3