Best IT Recipes

HTML5 input range shows the range value

I am creating a site where I want to use the range slider (I know that it only supports webkit browsers).

I have fully integrated it and work great. But I would like to use a text box to display the current slide value.

I mean, if initially the slider has a value of 5, so in the text box it should show up as 5, when I shift the value in the text box it should change.

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

+68
html5 css3 range
Apr 04 2018-12-12T00:
source share
8 answers

This uses javascript, not jquery directly. This can help you get 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="">
+66
Apr 04 2018-12-12T00:
source share

For those who are still looking for a solution without separate javascript code. There is little simple 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> </form>

JsFiddle Demo

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



Update:

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

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

Use identifier or element name, both are supported in morden browsers.

+118
Sep 21 '13 at 18:52
source share

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/

+28
Apr 11 '14 at 3:12
source share

an even better way is to catch an input event on the input itself and not 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 name="amount" for="rangeInput">0</output>

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

+13
Jan 19 '14 at 11:06
source share

If you want the current value to appear under the slider and move with it, try the following:

 <!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>

Please note that this type of HTML input element has one hidden function, for example, you can move the slider using the left / right / down / up arrow keys when the element focuses on it. Same thing with the Home / End / PageDown / PageUp keys.

+9
Feb 14 '16 at 11:12
source share

If you use multiple slides and you can use jQuery, you can do the following to easily deal with multiple sliders:

 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 <input type='range'> , you will receive events when you drag a range.

+3
Jul 20 '17 at 9:21
source share

 <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>
+1
09 Oct '16 at 17:11
source share

If you are still looking for an answer, you can use the input type = "number" instead of type = "range" min max work if it is set in the following order:
1-name
2-MaxLength
3 sizes
4 minute
5-max
just copy it

 <input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
0
Jan 18 '17 at 23:05
source share


More articles:


All Articles