HTML5 input type range show range value

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?

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/