HTML5输入类型范围显示范围值

小开

最佳答案

这里使用的是 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="">

小开

对于那些仍然在寻找没有单独 javascript 代码的解决方案的人来说。如果不编写 javascript 或 jquery 函数，几乎没有简单的解决方案:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

小提琴演示

如果要在文本框中显示该值，只需将输出更改为输入即可。

注意: 它仍然是在 html 中编写的 Javascript，我们可以在 js 中编写类似的代码:

 document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}

也可以使用 name 代替元素的 id，这两者在现代浏览器中都受支持。

小开

更好的方法是在输入本身上捕获输入事件而不是整个形式(就表现而言) :

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

下面是小提琴(根据 Ryan 的评论添加了 id)。

小开

输入可编辑的版本:

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

小开

如果您希望您的当前值显示在滑块下方并随之移动，请尝试以下操作:

<!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>

注意，这种类型的 HTML 输入元素有一个隐藏的特性，比如当元素的焦点集中在滑块上时，您可以使用左/右/下/上箭头键移动滑块。Home/End/PageDown/PageUp 键也是如此。

小开

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

小开

如果你仍然在寻找答案，你可以使用 type = “ number”来代替 type = “ range”，如果按照这个顺序设置，最大工作量:
一个名字
最大长度为2
3号
4分钟
最多5分钟
抄下来就行了

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

小开

如果您使用的是 多张幻灯片，并且可以使用 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">

另外，通过在 <input type='range'>上使用 oninput，您将在拖动范围时接收事件。

小开

我有一个包含(Vanilla) JavaScript 的解决方案，但只是作为一个库。您必须包含它一次，然后您需要做的就是设置数字输入的适当 source属性。

source属性应该是您想要侦听的范围输入的 querySelectorAll选择器。

它甚至可以用于 selectcs。它适用于多个侦听器。它的工作方向相反: 改变数字输入和范围输入将调整。它将处理稍后添加到页面上的元素(请查看 https://codepen.io/HerrSerker/pen/JzaVQg)

在 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>

小开

对于不关心 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>

小开

试试这个:

 <input min="0" max="100" id="when_change_range" type="range">
<input type="text" id="text_for_show_range">

以及 JQuery部分:

 $('#when_change_range').change(function(){
document.getElementById('text_for_show_range').value=$(this).val();
});

小开

没有 form、 min或外部 JavaScript 的最短版本。

<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>

解释

如果你想从 output中检索值，你通常使用一个可以从 oninput链接的 id，而不是使用 this.nextElementSibling.value(我们利用一些我们已经在使用的东西)

将上面的例子与这个有效但更复杂和冗长的答案进行比较:

<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>

最简短的回答是:

我们避免使用 this，这在 JS 中对于新手来说有些奇怪
我们避免了在 DOM 中连接兄弟节点的新概念
我们在 input中避免了将 id放在 output中的过多属性

笔记

在这两个例子中，我们不需要添加 min值 0
删除 JavaScript 的 this关键字使其成为一种更好的语言

小开

这里有一种普通的 JS 方法，可以自动将值添加到所有范围输入，而不需要任何额外的 HTML。

document.querySelectorAll('input[type=range]').forEach(e => {
e.setAttribute('data-value', e.value);
e.addEventListener('input', () => {
e.setAttribute('data-value', e.value);
});
});

input[type="range"]::after {
content: attr(data-value);
margin-right: -50px;
padding-left: 10px;
}

<input type="range"><br>
<input type="range"><br>
<input type="range">

小开

简单的 JavaScript 语言:

function displaySliderValue(eSlider){
eSlider.parentElement.querySelector('span').textContent = eSlider.value;
}

<div>
<span>1</span><br>
<input type="range" min="1" max="100" value="1" oninput="displaySliderValue(this);">
</div>