Html 范围滑块事件处理程序 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19625334/
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
Range Slider Event Handler Javascript
提问by kalpetros
I'm trying to get a range slider to work but I can't.
How do I add an event handler so when the user chooses a value my code reads that value. Right now its value is always 1.
我试图让范围滑块工作，但我不能。如何添加事件处理程序，以便当用户选择一个值时，我的代码会读取该值。现在它的价值总是1.
I would like to do this using pure Javascript.
我想使用纯 Javascript 来做到这一点。
HTML:
HTML：
<div id="slider">
<input class="bar" type="range" id="rangeinput" min="1" max="25" value="1" onchange="rangevalue.value=value"/>
<span class="highlight"></span>
<output id="rangevalue">1</output>
</div>
JAVASCRIPT:
爪哇脚本：
var rangeInput = document.getElementById("rangeinput").value;
var buttonInput = document.getElementById("btn");
if (buttonInput.addEventListener) {
buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
buttonInput.attachEvent('onclick', testtest);
}
function testtest(e) {
if (rangeInput > 0 && rangeInput < 5) {
alert("First");
} else {
alert("Second");
}
}
采纳答案by FriendlyGuy
Single Read
单读
The problem is that you're only reading the value once (at startup), instead of reading it every time the event occurs:
问题是您只读取一次值（在启动时），而不是每次发生事件时读取它：
// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;
You should be reading the value in the handler instead:
您应该改为读取处理程序中的值：
function testtest(e) {
// read the value from the slider:
var value = document.getElementById("rangeinput").value;
// now compare:
if (value > 0 && value < 5) {
alert("First");
} else {
alert("Second");
}
}
Or to rewrite your code:
或者重写你的代码：
var rangeInput = document.getElementById("rangeinput");
var buttonInput = document.getElementById("btn");
if (buttonInput.addEventListener) {
buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
buttonInput.attachEvent('onclick', testtest);
}
function testtest(e) {
var value = rangeInput.value;
if (value > 0 && value < 5) {
alert("First");
} else {
alert("Second");
}
}
Updating rangevalue
更新范围值
It also looks like you want to update the output element with the value of the range. What you're currently doing is referring to the element by id:
看起来您还想用范围的值更新输出元素。您当前所做的是通过 id 引用元素：
onchange="rangevalue.value=value"
However, as far as I know, this isn't standard behavior; you can't refer to elements by their id alone; you have to retrieve the element and then set the value via the DOM.
但是，据我所知，这不是标准行为；您不能仅通过 id 来引用元素；您必须检索元素，然后通过 DOM 设置值。
Might I suggest that you add a change listener via javascript:
我是否建议您通过 javascript 添加更改侦听器：
rangeInput.addEventListener("change", function() {
document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);
Of course, you'll have to update the code to use addEventListeneror attachEventdepending on the browsers that you want to support; this is where JQueryreally becomes helpful.
当然，您必须更新代码以使用addEventListener或attachEvent取决于您想要支持的浏览器；这就是JQuery真正有用的地方。
回答by iConnor
Use the mouseupevent for that.
mouseup为此使用该事件。
var rangeInput = document.getElementById("rangeinput");
rangeInput.addEventListener('mouseup', function() {
if (this.value > 0 && this.value < 5) {
alert("First");
} else{
alert("Second");
}
});
回答by SpliFF
You can also use the FORMs oninputmethod:
您还可以使用 FORMsoninput方法：
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" />100 +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
This has an advantage over onclick/onmouseupbecause it handles the case where the slider is moved using the keyboard (tab to the input and use the arrow keys)
这有一个优势，onclick/onmouseup因为它处理使用键盘移动滑块的情况（标签到输入并使用箭头键）
回答by gourabvarma
<script type="text/javascript">
function range()
{
//the simplest way i found
var p = document.getElementById('weight');
var res = document.getElementById('rangeval');
res.innerHTML=p.value+ " Lbs";
}
</script>
<label for="weight">Your weight in lbs:</label>
<input name="weight" type="range" id="weight" max="500" min="0" value="75" onChange="range()" onKeyUp="range()">
<span id="rangeval"></span>
