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

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

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

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   lt input  name  X  maxlength  3  size  2  min  1  max  100  type  number    gt

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      lt input type  range  id  rangeInput  name  rangeInput  min  0  max  20  value  0         oninput  amount value rangeInput value  gt                                                           lt output id  amount  name  amount  for  rangeInput  gt 0 lt  output gt    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

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   x000D   lt input type  range  value  24  min  1  max  100  oninput  this nextElementSibling value   this value  gt   lt output gt 24 lt  output gt  x000D   x000D   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

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

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

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

If you want your current value to be displayed beneath the slider and moving along with it  try this    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt MySliderValue lt  title gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D     lt h1 gt MySliderValue lt  h1 gt  x000D   x000D     lt div style  position relative  margin auto  width 90   gt  x000D       lt span style  position absolute  color red  border 1px solid blue  min-width 100px   gt  x000D       lt span id  myValue  gt  lt  span gt  x000D       lt  span gt  x000D       lt input type  range  id  myRange  max  1000  min  0  style  width 80   gt   x000D     lt  div gt  x000D   x000D     lt script type  text javascript  charset  utf-8  gt  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     lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   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

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

[html] HTML5 input type range show range value

Examples related to html

Examples related to css

Examples related to range