HTML5inputtypes范围显示范围值
我正在做一个网站，我想使用范围滑块（我知道它只支持webkit浏览器）。
我已经完全整合并且工作正常。 但我想用文本框来显示当前的幻灯片值。
我的意思是，如果最初的滑块值为5，所以在文本框中它应该显示为5，当我滑动文本框中的值应该改变。
我可以只使用CSS或HTML做到这一点。 我想避免JQuery。 可能吗？
这使用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代码的解决scheme。 没有写一个javascript或jquery函数有一点简单的解决scheme：
<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演示
如果要在文本框中显示该值，只需将输出更改为input。
更新：
它仍然是Javascript写在你的HTML，你可以用下面的JS代码replace绑定：
document.registrationForm.ageInputId.oninput = function(){ document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value; }
无论使用元素的ID还是名称，都可以在现代浏览器中使用。
带可编辑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>
更好的方法是在input本身而不是整个表单上捕获input事件（性能方面）：
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0" oninput="amount.value=rangeInput.value"> <output name="amount" for="rangeInput">0</output>
这是一个小提琴 （与瑞安的评论添加的id ）。
如果你想让你的当前值显示在滑块下面并且随之移动，试试这个：
<!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>
如果您使用多个幻灯片 ，并且您可以使用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">
<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>
如果你仍然在寻找答案，你可以使用input type =“number”来代替type =“range”min max如果按照这个顺序设置，则工作：
1名
2-最大长度
3-尺寸
4分钟
5-MAX
只是复制它
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
