HTML5 input type range show range value

Question

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?

You can *almost* do this with css using `:before`/`:after`, `content` and `attr()`, like [this](http://jsfiddle.net/hVvK2/). 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, Jul 02 '13 at 15:47
Fixing @waldir 's solution results in http://jsfiddle.net/RjWJ8/ though it still uses javascript to update the value attribute from the property. — user1277170, Mar 20 '14 at 15:21

Rahul R. · Answer 1 · 2021-03-01T14:03:36.410

318

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:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

JsFiddle Demo

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

Point to note: It is still Javascript written within your html, we can write something like below in js to do similar thing:

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

Instead of element's id, name could also be used, both are supported in modern browsers.

edited Mar 01 '21 at 14:03

answered Sep 21 '13 at 18:52

Rahul R.

5,965
3
27
38

1

+1 know I know about . Only problem is that E.I doesn't support it though. (W3School) http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output – radbyx Jun 14 '14 at 12:21
6

It's still javascript, and it's worse to bind oninput on form element than on input element itself. – cuixiping Oct 20 '14 at 00:19
2

@cuixiping, we can bind oninput on element instead of form, i just did it to show example. – Rahul R. Oct 29 '14 at 13:38
Forgive this late and noob question, but how does the handler refer to rangeInput and amount by their HTML names? – rep_movsd Sep 04 '15 at 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. Sep 10 '15 at 05:28
@rep_movsd, updated the answer as well, I think it should be clear now. – Rahul R. Sep 10 '15 at 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') everywhere – rep_movsd Sep 10 '15 at 15:02
Yes, only within form. – Rahul R. Sep 11 '15 at 07:35
2

I've edited the question's code to the bare minimum, stripping unnecessary code – vsync Oct 11 '20 at 16:41
This answer deserved rewards. – Frank Oct 22 '20 at 08:41
just reverified in Chrome official version 89.0.4389.114, it works fine. – Rahul R. Apr 06 '21 at 05:48

score 144 · Accepted Answer · edited Jul 01 '16 at 02:24

144

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

function updateTextInput(val) {
          document.getElementById('textInput').value=val; 
        }

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

edited Jul 01 '16 at 02:24

Alfonso Carrasco

125
5

answered Apr 04 '12 at 04:19

ejlepoud

1,578
2
11
5

7

but is there anyway to do it without javascript or jquery? – Niraj Chauhan Apr 04 '12 at 04:26
16

This is from http://mobile-web-app.blogspot.com/2012/03/easy-display-value-for-of-slider-in.html , still javascript. `code`Range 5 – ejlepoud Apr 04 '12 at 04:48
69

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 Apr 07 '13 at 01:28
1

@BaselShishani Couldn't agree more, not really sure what the thought process behind that was. – Noz Apr 22 '13 at 20:26
5

@BaselShishani: According to [MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input): "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 Jun 04 '15 at 15:45
IE 11 shows the slider with value, in tooltip, no need to have output. – Rahul R. Sep 10 '15 at 06:45
In practice, the update rate of the text seems super slow: on my machine it takes half a second to update on releasing the mouse. Is there a way to optimize it? – kakyo Feb 08 '20 at 02:34
1

OK, I should use `oninput` instead of `onchange`. – kakyo Feb 08 '20 at 02:38

score 52 · Answer 3 · answered Apr 11 '14 at 03:12

52

version with editable input:

<form>
    <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" />
</form>

http://jsfiddle.net/Xjxe6/

answered Apr 11 '14 at 03:12

d1Mm

701
6
4

12

Replace form variables with `this.nextElementSibling` or `this.previousElementSibling` and replace oninput with onchange to get a version that works outside of a form. http://jsfiddle.net/Xjxe6/94/ – Domino Mar 23 '15 at 20:45
1

fantastic answer! – Systems Rebooter Oct 01 '21 at 18:39

score 40 · Answer 4 · edited Mar 01 '18 at 17:00

40

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"
       oninput="amount.value=rangeInput.value">                                                       

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

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

edited Mar 01 '18 at 17:00

Roko C. Buljan

196,159
39
305
313

answered Jan 19 '14 at 11:06

Ilana Hakim

762
6
10

3

In Firefox 27, this didn't work for me until I added `id="amount"` for the output, too. – Ryan Mar 20 '14 at 04:38
this should work without id: `oninput="this.form.amount.value=this.value"` – d1Mm Apr 11 '14 at 02:44
1

this works but how do I get to current value and show it when the page refreshes? :-/ – user2513846 Sep 03 '15 at 20:30

drugan · Answer 5 · 2016-02-14T17:40:58.917

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MySliderValue</title>

</head>
<body>
  <h1>MySliderValue</h1>

  <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>
    </span>
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
  </div>

  <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);

  myValue.parentElement.style.left = px + 'px';
  myValue.parentElement.style.top = 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;
    myValue.parentElement.style.left = px + 'px';
  };
  </script>

</body>
</html>

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.

gengns · Answer 6 · 2020-10-16T17:24:11.577

Shortest version without form, min or external JavaScript.

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

Explanation

If you wanna retrieve the value from the output you commonly use an id that can be linked from the oninput instead of using this.nextElementSibling.value (we take advantage of something that we are already using)

Compare the example above with this valid but a little more complex and long answer:

<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>

With the shortest answer:

We avoid the use of this, something weird in JS for newcomers
We avoid new concept about connecting siblings in the DOM
We avoid too much attributes in the input placing the id in the output

Notes

In both examples we don't need to add the min value when equal to 0
Removing JavaScript’s this keyword makes it a better language

Even better, value is displayed or can be set manually: – djibe Nov 22 '20 at 22:38 — djibe, Nov 22 '20 at 22:38

score 7 · Answer 7 · answered Jul 20 '17 at 09:21

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) {
  $(elem).next().val($(elem).val());
}

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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.

score 5 · Answer 8 · answered Nov 20 '22 at 07:01

In plain JavaScript:

function displaySliderValue(eSlider){   
    eSlider.parentElement.querySelector('span').textContent = eSlider.value;
}

<div>
    <span>1</span><br>
    <input type="range" min="1" max="100" value="1" oninput="displaySliderValue(this);">
</div>

score 3 · Answer 9 · answered Oct 25 '19 at 01:07

For people don't care about jquery use, here is a short way without using any id

<label> userAvatar :
  <input type="range" name="userAvatar" min="1" max="100" value="1"
         onchange="$('~ output', this).val(value)" 
         oninput="$('~ output', this).val(value)">
  <output>1</output>
</label>

Mike · Answer 10 · 2022-12-10T22:27:04.933

Here's a vanilla JS way of automatically adding the value to all range inputs without any extra HTML.

Edit: Chrome only. I didn't realize it doesn't work with Firefox.

document.querySelectorAll('input[type=range]').forEach(e => {
  e.setAttribute('data-value', e.value);
  e.addEventListener('input', () => {
    e.setAttribute('data-value', e.value);
  });
});

input[type="range"]::after {
  content: attr(data-value);
  margin-right: -50px;
  padding-left: 10px;
}

<input type="range"><br>
<input type="range"><br>
<input type="range">

score 2 · Answer 11 · answered Mar 20 '19 at 12:12

I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate source attribute of the number inputs.

The source attribute should be the querySelectorAll selector of the range input you want to listen to.

It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQg for that)

Tested in Chrome, Firefox, Edge and IE11

;(function(){
  
  function emit(target, name) {
    var event
    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(name, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = name;
    }

    event.eventName = name;

    if (document.createEvent) {
      target.dispatchEvent(event);
    } else {
      target.fireEvent("on" + event.eventType, event);
    }    
  }

  var outputsSelector = "input[type=number][source],select[source]";
  
  function onChange(e) {
    var outputs = document.querySelectorAll(outputsSelector)
    for (var index = 0; index < outputs.length; index++) {
      var item = outputs[index]
      var source = document.querySelector(item.getAttribute('source'));
      if (source) {
        if (item === e.target) {
          source.value = item.value
          emit(source, 'input')
          emit(source, 'change')
        }

        if (source === e.target) {
          item.value = source.value
        }
      }
    }
  }
  
  document.addEventListener('change', onChange)
  document.addEventListener('input', onChange)
}());

<div id="div">
  <input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
  <input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
  <br>

  <input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
  <br>
  
  <input name="example3" type="range" max="20" min="0" value="10" step="1">
  <select source="[name=example3]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
  </select>
  <br>
  
</div>
<br>

score 0 · Answer 12 · answered Mar 10 '20 at 10:39

0

Try This :

 <input min="0" max="100" id="when_change_range" type="range">
 <input type="text" id="text_for_show_range">

and in jQuery section :

 $('#when_change_range').change(function(){
 document.getElementById('text_for_show_range').value=$(this).val();
  });

answered Mar 10 '20 at 10:39

mamal

1,791
20
14

Excellent !!! , but note that you put value='20' more than the max ='10' , so it gets an error . – Jun 11 '22 at 06:10

score -1 · Answer 13 · edited Oct 09 '16 at 17:27

-1

<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>
</form>

edited Oct 09 '16 at 17:27

Misa Lazovic

2,805
10
32
38

answered Oct 09 '16 at 17:11

luis

155
7

2

Error: { "message": "Uncaught ReferenceError: getvalor is not defined", "filename": "https://stacksnippets.net/js", "lineno": 12, "colno": 169 } – Darush Jul 29 '17 at 01:33

score -4 · Answer 14 · answered Jan 18 '17 at 23:05

-4

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:
1-name
2-maxlength
3-size
4-min
5-max
just copy it

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

answered Jan 18 '17 at 23:05

autodidact

88
1
1
7

1

This is just wrong, it does not do what the topic starter requested. – bolvo Sep 05 '18 at 18:01

HTML5 input type range show range value

14 Answers14

Linked

Related