我想提出一个网站，我想使用范围滑块（我知道它仅支持WebKit浏览器）。
我已经完全集成，并能正常工作。 不过，我想用一个文本框，显示当前幻灯片值。
我的意思是，如果最初滑块在值为5，所以在文本框中应该显示为5，当我在幻灯片文本框中的值应该改变。
我能做到这一点只用CSS或HTML。 我想避免的JQuery。 可能吗？
Answer 1:
这使用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=""> Answer 2:
对于那些谁仍在寻找没有单独的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>
的jsfiddle演示
如果你想显示在文本框中的值，只需更改输出输入。
更新：
它仍然使用Javascript编写你的HTML中，你可以用下面的JS代码替换绑定：
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
无论是使用元素的ID或名称，无论是在现代浏览器的支持。
Answer 3:
版本编辑输入：
<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/
Answer 4:
一个更好的办法是捉对输入自身的输入事件，而不是整个表格（性能明智）：
<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>
这里有一个小提琴 （与id添加为每莱恩的评论）。
Answer 5:
如果你想显示在滑块下方的电流值，并与它一起移动，试试这个：
<!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 input元素都有一个隐藏的功能，比如你可以用左/右/下/上箭头键移动滑块，当元素已重点关注一下。 与Home / End键相同/下页/上一页键。
Answer 6:
如果您使用多个幻灯片 ，而且您可以使用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"> 另外，通过使用oninput在<input type='range'>你会同时拖动范围接收事件。
Answer 7:
<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> Answer 8:
我有包括（香草）的JavaScript，但只是作为一个库的解决方案。 您HABE包括一次，那么所有你需要做的是设置适当source的数量输入属性。
该source属性应该querySelectorAll要听范围的输入选择。
它甚至与selectcs工作。 它的工作原理与多个听众。 和它的作品在其他方向：改号的输入和输入范围将调整。 它将在以后添加到页面（检查元素工作https://codepen.io/HerrSerker/pen/JzaVQg为）
经测试在Chrome，火狐，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> Answer 9:
如果您还在为寻找答案，你可以替代型的使用INPUT TYPE =“号” =“范围”最小值最大值工作，如果它的顺序设置：
1名
2-最大长度
3-尺寸
4分钟
5-MAX
只是复制
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
文章来源: HTML5 input type range show range value
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 爷的心禁止访问 的文章《HTML5输入类型范围显示范围值HTML5输入类型范围显示范围值(HTML5 input type 》','https://www.manongdao.com/article-834293.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}