Menu
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. Tip: Always add the <label> tag for best accessibility practices!
html make range bar show value.
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.
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="">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/
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).
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.
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:
this, something weird in JS for newcomersinput placing the id in the output
Notes
min value when equal to
0
this keyword makes it a better languageIf 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With