html input range修改,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?

回答1:

This uses javascript, not jquery directly. It might help get you started.

function updateTextInput(val) { document.getElementById('textInput').value=val; }

回答2:

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: 24

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

Update: It is still Javascript written within your html, you can replace the bindings with below JS code: document.registrationForm.ageInputId.oninput = function(){ document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value; }

Either use element's Id or name, both are supported in morden browsers.

回答3:

version with editable input:

回答4:

an even better way would be to catch the input event on the input itself rather than on the whole form (performance wise) : 0

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

回答5:

If you want your current value to be displayed beneath the slider and moving along with it, try this:

MySliderValue

MySliderValue

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.

回答6:

If 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; }

Also, by using oninput on the you'll receive events while dragging the range.

回答7:

回答8:

if you still looking for the answer you can use input type="number" in place of type="range" min max work if it set in that order:

1-name

2-maxlength

3-size

4-min

5-max

just copy it