Problem
I’m building a website and want to employ a range slider (I know it only supports webkit browsers).
I’ve fully integrated it and it’s working perfectly. However, I’d like to display the current slide value in a textbox.
If the slider is originally set to 5, the value in the text box should also be set to 5. As I move the slider, the value in the text box should change.
Is it possible to achieve this solely with CSS or HTML? I don’t want to use JQuery. Is that even possible?
Asked by Niraj Chauhan
Solution #1
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:
JsFiddle Demo
Simply change output to input to display the value in the text field.
Note that this is still Javascript placed within your html; however, we can write something like this in js to achieve the same result:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Name can be used instead of the element’s id, and both are supported by current browsers.
Answered by Rahul R.
Solution #2
This makes use of javascript rather than jquery directly. It can be useful in getting you started.
Answered by ejlepoud
Solution #3
version with input that can be changed:
<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 by d1Mm
Solution #4
An even better solution (performance-wise) would be to catch the input event on the input alone rather than the entire form:
<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 (updated with the id in response to Ryan’s comment).
Answered by Ilana Hakim
Solution #5
Try this if you want your current value to appear beneath the slider and move with it:
When the element has attention, you can move the slider with the left/right/down/up arrow keys, which is a hidden function of this sort of HTML input element. The Home/End/PageDown/PageUp keys work in the same way.
Answered by drugan
Post is based on https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value