Coder Perfect

Types of input in HTML5 show the value of the range


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:

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

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"

<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