CODEWITHSUNDEEP
javascripthtml
Ian Hazzard
Ian Hazzard

Reputation: 7771

How to dynamically update range slider

I've created the following code to show the user their range slider value. However, it only shows the value when the user stops moving the slider. Is there a way to show the value WHILE the user drags the range slider? I'm looking for a way to do this in vanilla JS.

function updateInput(val) {
      document.getElementById('textInput').innerHTML=val; 
    }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">                                                       
    <p id="textInput"></p>

Upvotes: 1

Views: 3695

Answers (3)

friedi
friedi

Reputation: 4360

Here you go:

<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >                                                       
    <p id="textInput"></p>

oninput is not supported in IE10, so you have to use both, oninput and onchange.

Here is the demo

Upvotes: 2

Alex Doe
Alex Doe

Reputation: 934

onmousemove function make this happen:

<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">                                                       
    <p id="textInput"></p>

Upvotes: 1

sdleihssirhc
sdleihssirhc

Reputation: 42496

Use oninput instead of onchange.

Magical proof!

Upvotes: 1

Related Questions