CODEWITHSUNDEEP
htmlprintinginput
AshotN
AshotN

Reputation: 413

How do I show the value beside an HTML5 range input type?

Okay so I am trying to use range for input type

Times: <input type="range" name ="times"><br>

But I want the value to be printed next to it, how can I do this?

Like

-------*-- 7

*--------- 1

Upvotes: 3

Views: 9107

Answers (2)

Hady Elsahar
Hady Elsahar

Reputation: 2151

attach to it onChange event and in the event handler function you can select the value of the and write it as innerHtml to a span beside the controller 

<input id="mine" type="range" min="-100" max="100" value="0" step="10" onChange="change();"> <span id="result"></span>

<script>
var result = document.getElementById("result");
var mine = document.getElementById("mine");
function change(){
    result.innerText = mine.value;
}
</script>

Upvotes: 6

Nomaan
Nomaan

Reputation: 51

function showCount(){
    var count = document.getElementById("slider").value;
    console.log("meter position : "+count);
}

<input type="range" value="0" id="slider" step="1" min="0" max="15" onchange="showCount()"/>

This will give the count when you will move the sliderenter code here or put and alert.

Upvotes: 0

Related Questions