HTML5 input type range show range value

Go To


I am making a website where I want to use range slider(I know it only supports webkit browsers).

I have integrated it fully and works fine. But I would like to use a textbox to show the current slide value.

I mean if initially the slider is at value 5, so in text box it should show as 5, when I slide the value in text box should change.

Can I do this using only CSS or html. I want to avoid JQuery. Is it possible?

2012-04-04 03:57
by Niraj Chauhan
You can't do this without javascript - mrtsherman 2012-04-04 05:12
You can almost do this with css using :before/:after, content and attr(), like this. However, the :before/:after pseudo-elements actually eat up some of the slider's range (although maybe that's fixable), and most importantly, the values aren't updated if the slider is manipulated. Nevertheless, I thought it would be interesting to leave this here. It might become possible in the future - waldyrious 2013-07-02 15:47
Fixing @waldir 's solution results in though it still uses javascript to update the value attribute from the property - user1277170 2014-03-20 15:21


This uses javascript, not jquery directly. It might help get you started.

function updateTextInput(val) {
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">

2012-04-04 04:19
by ejlepoud
but is there anyway to do it without javascript or jquery - Niraj Chauhan 2012-04-04 04:26
This is from , still javascript. code 5ejlepoud 2012-04-04 04:48
Does anyone else think that providing a blind slider is lacking. True that providing fancy widgets is not the role of the basic standard, but showing the selected value is core to this widget, so I think that (optionally) showing the number in a basic form such as a tooltip on top of the slider handle would make for a better design - Basel Shishani 2013-04-07 01:28
@BaselShishani Couldn't agree more, not really sure what the thought process behind that was - Noz 2013-04-22 20:26
@BaselShishani: According to MDN: "range: A control for entering a number whose exact value is not important.". In light of that assumption, showing no exact value makes sense. But in practice it will probably also be used for selecting exact values - bodo 2015-06-04 15:45
IE 11 shows the slider with value, in tooltip, no need to have output - Rahul R. 2015-09-10 06:45


For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:

<form name="registrationForm">
   <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
   <output name="ageOutputName" id="ageOutputId">24</output>

JsFiddle Demo

If you want to show the value in text box, simply change output to input.


It is still Javascript written within your html, you can replace the bindings with below JS code:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;

Either use element's Id or name, both are supported in morden browsers.

2013-09-21 18:52
by Rahul R.
+1 know I know about . Only problem is that E.I doesn't support it though. (W3School) - radbyx 2014-06-14 12:21
It's still javascript, and it's worse to bind oninput on form element than on input element itself - cuixiping 2014-10-20 00:19
@cuixiping, we can bind oninput on element instead of form, i just did it to show example - Rahul R. 2014-10-29 13:38
Forgive this late and noob question, but how does the handler refer to rangeInput and amount by their HTML names - rep_movsd 2015-09-04 18:19
@rep_movsd, it is same as this.formName.rangeInput or this.formName.amount. Form access the elements using their name. However I am not 100% sure - Rahul R. 2015-09-10 05:28
@rep_movsd, updated the answer as well, I think it should be clear now - Rahul R. 2015-09-10 06:35
Interesting that modern browsers treat IDs as identifiers directly. Does it only work within forms? If it works generally then I can avoid typing $('#whatsitsname') everywher - rep_movsd 2015-09-10 15:02
Yes, only within form - Rahul R. 2015-09-11 07:35


version with editable input:

    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />

2014-04-11 03:12
by d1Mm
Replace form variables with this.nextElementSibling or this.previousElementSibling and replace oninput with onchange to get a version that works outside of a form. - Jacque Goupil 2015-03-23 20:45


an even better way would be to catch the input event on the input itself rather than on the whole form (performance wise) :

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"

<output id="amount" name="amount" for="rangeInput">0</output>

Here's a fiddle (with the id added as per Ryan's comment).

2014-01-19 11:06
by Ilana Hakim
In Firefox 27, this didn't work for me until I added id="amount" for the output, too - Ryan 2014-03-20 04:38
this should work without id: oninput="this.form.amount.value=this.value"d1Mm 2014-04-11 02:44
this works but how do I get to current value and show it when the page refreshes? :- - user2513846 2015-09-03 20:30


If you want your current value to be displayed beneath the slider and moving along with it, try this:

<!DOCTYPE html>
  <meta charset="utf-8">


  <div style="position:relative; margin:auto; width:90%">
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
    <span id="myValue"></span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 

  <script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2); = px + 'px'; = myRange.offsetHeight + 'px';
  myValue.innerHTML = myRange.value + ' ' + myUnits;

  myRange.oninput =function(){
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
    myValue.innerHTML = myRange.value + ' ' + myUnits; = px + 'px';


Note that this type of HTML input element has one hidden feature, such as you can move the slider with left/right/down/up arrow keys when the element has focus on it. The same with Home/End/PageDown/PageUp keys.

2016-02-14 11:12
by drugan


If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:

function updateRangeInput(elem) {
input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }
<script src=""></script>

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">

<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">

Also, by using oninput on the <input type='range'> you'll receive events while dragging the range.

2017-07-20 09:21
by Toni Almeida


<form name="registrationForm">
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
    <input type="text" name="ageOutputName" id="ageOutputId"></input>

2016-10-09 17:11
by luis
Error: { "message": "Uncaught ReferenceError: getvalor is not defined", "filename": "", "lineno": 12, "colno": 169 - Darush 2017-07-29 01:33


if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:
just copy it

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />
2017-01-18 23:05
by kyo adam
This is just wrong, it does not do what the topic starter requested - bolvo 2018-09-05 18:01