Update Input field value with value from a range slider using javascript

Question

I'm trying to modify a how-to example which I got from W3Schools

The example is a range slider which display the value of the slider inside a <span> tag

What I would like to do is display the value inside an input field

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

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

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

Source: W3Schools range slider example

I would like to display the value inside an input field instead of the <span> tag so I have tried to modify the example:

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <input type="number" id="demo" name="fname" value="">

</div>

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

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

but this doesn't work as it only display the initial value and does not update if I move the slider knob

Don't get the value immediately. Use output.value = this.value; in the handler. — Andy
– Andy, Commented Oct 8, 2022 at 16:08

Andy · Accepted Answer · 2022-10-08 16:23:17Z

2

You can store the element's reference in the output var & instead of innerHTML you could just use the value attribute.

Here's the updated code for your reference:

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

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

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <input type="number" id="demo" name="fname" value="">
</div>

edited Oct 8, 2022 at 16:23

Andy

63.7k13 gold badges72 silver badges99 bronze badges

answered Oct 8, 2022 at 16:13

Laxman Sharma

1301 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

UmairFarooq · Accepted Answer · 2022-10-08 16:10:51Z

0

setting an onchange function on the range onchange="myfunction()"so this function will be called every time you change the slider.

inside the function setting demo.value to slider.value

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


function myfunction() {
  demo.value = slider.value
}

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" onchange="myfunction()">
  <input type="number" id="demo" name="fname" value="">

</div>

answered Oct 8, 2022 at 16:10

UmairFarooq

1,3251 gold badge5 silver badges8 bronze badges

4 Comments

Andy Over a year ago

Why did you decide to inline the JS?

UmairFarooq Over a year ago

why not? he is a beginner so its easier to understand. he can always learn about event listeners when he gets a little grasp on JS

Andy Over a year ago

The OP is already using a listener in the JS code - oninput - so it's clear they understand them.

UmairFarooq Over a year ago

ok you are great. Congratulations

Collectives™ on Stack Overflow

Update Input field value with value from a range slider using javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related