Html HTML5 输入类型范围显示范围值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10004723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 input type range show range value
提问by Niraj Chauhan
I am making a website where I want to use range slider(I know it only supports webkit browsers).
我正在制作一个我想使用范围滑块的网站（我知道它只支持 webkit 浏览器）。
I have integrated it fully and works fine. But I would like to use a textboxto show the current slide value.
我已经完全集成它并且工作正常。但我想用 atextbox来显示当前的幻灯片值。
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.
我的意思是如果最初滑块的值是 5，那么在文本框中它应该显示为 5，当我滑动文本框中的值时应该改变。
Can I do this using only CSSor html. I want to avoid JQuery. Is it possible?
我可以只使用CSS或html. 我想避免JQuery。是否可以？
采纳答案by ejlepoud
This uses javascript, not jquery directly. It might help get you started.
这使用 javascript，而不是直接使用 jquery。它可能会帮助您入门。
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="">回答by Rahul R.
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:
对于那些仍在寻找没有单独 javascript 代码的解决方案的人。如果不编写 javascript 或 jquery 函数，几乎没有简单的解决方案：
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
<output name="ageOutputName" id="ageOutputId">24</output>
</form>
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:
它仍然是在您的 html 中编写的 Javascript，您可以使用以下 JS 代码替换绑定：
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.
使用元素的 Id 或名称，现代浏览器都支持两者。
回答by d1Mm
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>
回答by Ilana Hakim
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 idadded as per Ryan's comment).
这是一个小提琴（id根据瑞安的评论添加）。
回答by drugan
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.
请注意，这种类型的 HTML 输入元素具有一个隐藏功能，例如，当元素处于焦点时，您可以使用向左/向右/向下/向上箭头键移动滑块。与 Home/End/PageDown/PageUp 键相同。
回答by António Almeida
If you're using multiple slides, and you can use jQuery, you can do the follow to deal with multiple sliders easily:
如果您使用多个幻灯片，并且可以使用 jQuery，则可以执行以下操作来轻松处理多个滑块：
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 oninputon the <input type='range'>you'll receive events while dragging the range.
此外，通过使用oninputon<input type='range'>您将在拖动范围时接收事件。
回答by yunzen
I have a solution that involves (Vanilla) JavaScript, but only as a library. You habe to include it once and then all you need to do is set the appropriate sourceattribute of the number inputs.
我有一个涉及（Vanilla）JavaScript 的解决方案，但仅作为一个库。您必须包含一次，然后您需要做的就是设置source数字输入的适当属性。
The sourceattribute should be the querySelectorAllselector of the range input you want to listen to.
该source属性应该是querySelectorAll您要收听的范围输入的选择器。
It even works with selectcs. And it works with multiple listeners. And it works in the other direction: change the number input and the range input will adjust. And it will work on elements added later onto the page (check https://codepen.io/HerrSerker/pen/JzaVQgfor that)
它甚至适用于 selectcs。它适用于多个侦听器。它在另一个方向工作：改变数字输入，范围输入将调整。它适用于稍后添加到页面上的元素（检查https://codepen.io/HerrSerker/pen/JzaVQg）
Tested in Chrome, Firefox, Edge and IE11
在 Chrome、Firefox、Edge 和 IE11 中测试
;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>回答by hexaJer
For people don't care about jquery use, here is a short way without using any id
对于不关心 jquery 使用的人，这里有一个不使用任何 id 的简短方法
<label> userAvatar :
<input type="range" name="userAvatar" min="1" max="100" value="1"
onchange="$('~ output', this).val(value)"
oninput="$('~ output', this).val(value)">
<output>1</output>
</label>
回答by mamal
Try This :
尝试这个 ：
<input min="0" max="100" id="when_change_range" type="range">
<input type="text" id="text_for_show_range">
and in jQuerysection :
并在jQuery部分：
$('#when_change_range').change(function(){
document.getElementById('text_for_show_range').value=$(this).val();
});
回答by luis
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>