我正在建立一个网站,我想使用范围滑块(我知道它只支持webkit浏览器).
我已经完全集成它并且工作正常.但我想使用文本框来显示当前的幻灯片值.
我的意思是如果最初滑块的值是5,那么在文本框中它应该显示为5,当我滑动文本框中的值时应该更改.
我可以只使用CSS或HTML来做到这一点.我想避免使用JQuery.可能吗？
Rah*_* R. 153
对于那些仍在寻找没有单独的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>
如果要在文本框中显示值,只需将输出更改为输入.
更新:
它仍然是在你的html中编写的Javascript,你可以用下面的JS代码替换绑定:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
要么使用元素的Id或名称,要么在现代浏览器中都支持.
ejl*_*oud 99
这使用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="">d1M*_*1Mm 34
带可编辑输入的版本:
<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>
小智 26
更好的方法是在输入本身而不是在整个表单上捕获输入事件(性能明智):
<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根据Ryan的评论添加).
dru*_*gan 13
如果您希望当前值显示在滑块下方并随之移动,请尝试以下操作:
<!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键相同.
如果使用多个幻灯片，并且可以使用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'>您可以在拖动范围时接收事件。
最短的版本没有form，min或外部JavaScript。
<input type="range" value="0" max="10" oninput="num.value = this.value">
<output id="num">0</output>解释
如果你想从output你通常使用的值中检索值id，可以从而oninput不是使用链接this.nextElementSibling.value（我们利用我们已经在使用的东西）
将上面的示例与这个有效但稍微复杂和冗长的答案进行比较：
<input id="num" type="range" value="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output>0</output>
用最短的答案：
this对于新手，我们避免使用JS 中的一些奇怪的东西input放置id在output笔记
min当等于时我们不需要添加值
0this关键字使其成为更好的语言小智 5
在简单的 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>