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?

User · Answer

Try This      lt input min  0  max  100  id  when change range  type  range  gt    lt input type  text  id  text for show range  gt    and in jQuery section         when change range   change function     document getElementById  text for show range   value   this  val

User · Answer

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

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <title>MySliderValue</title>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
  <h1>MySliderValue</h1>_x000D_
_x000D_
  <div style="position:relative; margin:auto; width:90%">_x000D_
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">_x000D_
    <span id="myValue"></span>_x000D_
    </span>_x000D_
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> _x000D_
  </div>_x000D_
_x000D_
  <script type="text/javascript" charset="utf-8">_x000D_
var myRange = document.querySelector('#myRange');_x000D_
var myValue = document.querySelector('#myValue');_x000D_
var myUnits = 'myUnits';_x000D_
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));_x000D_
var px =  ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);_x000D_
_x000D_
  myValue.parentElement.style.left = px + 'px';_x000D_
  myValue.parentElement.style.top = myRange.offsetHeight + 'px';_x000D_
  myValue.innerHTML = myRange.value + ' ' + myUnits;_x000D_
_x000D_
  myRange.oninput =function(){_x000D_
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);_x000D_
    myValue.innerHTML = myRange.value + ' ' + myUnits;_x000D_
    myValue.parentElement.style.left = px + 'px';_x000D_
  };_x000D_
  </script>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

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.

User · Answer

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   x000D   x000D    function    x000D     x000D    function emit target  name    x000D      var event x000D      if  document createEvent    x000D        event   document createEvent  HTMLEvents    x000D        event initEvent name  true  true   x000D        else   x000D        event   document createEventObject    x000D        event eventType   name  x000D        x000D   x000D      event eventName   name  x000D   x000D      if  document createEvent    x000D        target dispatchEvent event   x000D        else   x000D        target fireEvent  on    event eventType  event   x000D            x000D      x000D   x000D    var outputsSelector    input type number  source  select source    x000D     x000D    function onChange e    x000D      var outputs   document querySelectorAll outputsSelector  x000D      for  var index   0  index  lt  outputs length  index      x000D        var item   outputs index  x000D        var source   document querySelector item getAttribute  source     x000D        if  source    x000D          if  item     e target    x000D            source value   item value x000D            emit source   input   x000D            emit source   change   x000D            x000D   x000D          if  source     e target    x000D            item value   source value x000D            x000D          x000D        x000D      x000D     x000D    document addEventListener  change   onChange  x000D    document addEventListener  input   onChange  x000D        x000D   lt div id  div  gt  x000D     lt input name  example  type  range  max  2250000  min  -200000  value  0  step  50000  gt  x000D     lt input id  example-value  type  number  max  2250000  min  -200000  value  0  step  50000  source   name example   gt  x000D     lt br gt  x000D   x000D     lt input name  example2  type  range  max  2240000  min  -160000  value  0  step  50000  gt  x000D     lt input type  number  max  2240000  min  -160000  value  0  step  50000  source   name example2   gt  x000D     lt input type  number  max  2240000  min  -160000  value  0  step  50000  source   name example2   gt  x000D     lt br gt  x000D     x000D     lt input name  example3  type  range  max  20  min  0  value  10  step  1  gt  x000D     lt select source   name example3   gt  x000D       lt option value  0  gt 0 lt  option gt  x000D       lt option value  1  gt 1 lt  option gt  x000D       lt option value  2  gt 2 lt  option gt  x000D       lt option value  3  gt 3 lt  option gt  x000D       lt option value  4  gt 4 lt  option gt  x000D       lt option value  5  gt 5 lt  option gt  x000D       lt option value  6  gt 6 lt  option gt  x000D       lt option value  7  gt 7 lt  option gt  x000D       lt option value  8  gt 8 lt  option gt  x000D       lt option value  9  gt 9 lt  option gt  x000D       lt option value  10  gt 10 lt  option gt  x000D       lt option value  11  gt 11 lt  option gt  x000D       lt option value  12  gt 12 lt  option gt  x000D       lt option value  13  gt 13 lt  option gt  x000D       lt option value  14  gt 14 lt  option gt  x000D       lt option value  15  gt 15 lt  option gt  x000D       lt option value  16  gt 16 lt  option gt  x000D       lt option value  17  gt 17 lt  option gt  x000D       lt option value  18  gt 18 lt  option gt  x000D       lt option value  19  gt 19 lt  option gt  x000D       lt option value  20  gt 20 lt  option gt  x000D     lt  select gt  x000D     lt br gt  x000D     x000D   lt  div gt  x000D   lt br gt  x000D   x000D   x000D

User · Answer

For people don t care about jquery use  here is a short way without using any id   lt label gt  userAvatar      lt input type  range  name  userAvatar  min  1  max  100  value  1           onchange       output   this  val value             oninput       output   this  val value   gt     lt output gt 1 lt  output gt   lt  label gt

User · Answer

version with editable input    lt form gt       lt input type  range  name  amountRange  min  0  max  20  value  0  oninput  this form amountInput value this value    gt       lt input type  number  name  amountInput  min  0  max  20  value  0  oninput  this form amountRange value this value    gt   lt  form gt    http   jsfiddle net Xjxe6

User · Answer

If you re using multiple slides  and you can use jQuery  you can do the follow to deal with multiple sliders easily    x000D   x000D  function updateRangeInput elem    x000D      elem  next   val   elem  val     x000D    x000D  input   padding  8px  border  1px solid  ddd  color   555  display  block    x000D  input type text    width  100px    x000D  input type range    width  400px    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  range  min  0  max  100  oninput  updateRangeInput this   value  0  gt  x000D   lt input type  text  value  0  gt  x000D   x000D   lt input type  range  min  0  max  100  oninput  updateRangeInput this   value  50  gt  x000D   lt input type  text  value  50  gt  x000D   x000D   x000D    Also  by using oninput on the  lt input type  range  gt  you ll receive events while dragging the range

User · Answer

Shortest version without form  min or external JavaScript   x000D   x000D   lt input type  range  value  0  max  10  oninput  num value   this value  gt   lt output id  num  gt 0 lt  output gt  x000D   x000D   x000D   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   lt input id  quot num quot  type  quot range quot  value  quot 0 quot  max  quot 100 quot  oninput  quot this nextElementSibling value   this value quot  gt   lt output gt 0 lt  output gt   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

User · Answer

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

User · Answer

x000D   x000D   lt form name  registrationForm  gt  x000D       lt input type  range  name  ageInputName  id  ageInputId  value  24  min  1  max  10  onchange  getvalor this value    oninput  ageOutputId value   ageInputId value  gt  x000D       lt input type  text  name  ageOutputName  id  ageOutputId  gt  lt  input gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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:

_x000D_

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

_x000D_

JsFiddle Demo

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

Update:

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.

User · Answer

This uses javascript  not jquery directly  It might help get you started    x000D   x000D  function updateTextInput val    x000D            document getElementById  textInput   value val   x000D            x000D   lt input type  range  name  rangeInput  min  0  max  100  onchange  updateTextInput this value    gt  x000D   lt input type  text  id  textInput  value    gt  x000D   x000D   x000D

[html] HTML5 input type range show range value

The answer is

Examples related to html

Examples related to css

Examples related to range

Tags