Javascript 如何检索和显示滑块范围值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29103818/
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
How can I retrieve and display slider range value?
提问by meteorBuzz
How can I retrieve and display the slider value from the input range?
如何从输入范围中检索和显示滑块值？
I am using Meteor and prefer javascript code.
我正在使用 Meteor 并且更喜欢 javascript 代码。
<input id="slider" type="range" min="50" max="100" step="10" oninput="sliderChange(this.value)">
<output id="sliderVal"> </output>
javascript;
javascript;
function sliderChange(val) {
document.getElementById('sliderVal').innerHTML = val;
}
回答by meteorBuzz
After referencing http://www.w3schools.com/jsref/event_oninput.aspit seems you can execute a method upon the change event of oninput.
参考http://www.w3schools.com/jsref/event_oninput.asp 后，您似乎可以在oninput的更改事件上执行一个方法。
The following code retrieves and displays the numbers on the page.
以下代码检索并显示页面上的数字。
<template name="myTemplate>
<input id="slider" type="range" min="50" max="100" step="10" value="50">
<output id="output"></output>
</template>
client.js
客户端.js
Template.myTemplate.rendered = function(){
document.getElementById("slider").oninput = function() {
myFunction()
};
}
function myFunction() {
var val = document.getElementById("slider").value //gets the oninput value
document.getElementById('output').innerHTML = val //displays this value to the html page
console.log(val)
}
THE METEOR WAY:Additionally, you may use the changeeventType and map it how you want. This works when an input changes state.
流星方式：此外，您可以使用changeeventType 并将其映射为您想要的方式。这在输入更改状态时起作用。
Template.yourTemplate.events({
'change input[type=range]': function(event){
var sliderValue = event.currentTarget.value
Session.set('sliderValueIs', sliderValue)
//then you can get this session and return it in a helper to display on your page
}
})
回答by user67177
RE: Changing Session var continuously while dragging HTML input element:
RE：在拖动 HTML 输入元素时连续更改会话变量：
If you listen for the changeevent, the function will run only when the mouse is released. That means it won't run while dragging.
如果您监听该change事件，则该函数仅在释放鼠标时运行。这意味着它不会在拖动时运行。
If you listen for the inputevent, the function will run even while dragging.
如果您侦听该input事件，即使在拖动时该函数也会运行。
THE METEOR WAY:
流星之路：
Template.yourTemplate.events({
'input input[type=range]': function(event){
var sliderValue = event.currentTarget.value
Session.set('sliderValueIs', sliderValue)
//The Session var will be set as you drag the slider across its range of values.
//later, you can get this session and return it in a helper to display on your page
}
})
回答by j08691
As noted in the comments, you have two elements with the same ID and IDs must be unique. Once that's resolved, you can get and set the value of the slider like:
如评论中所述，您有两个具有相同 ID 的元素，并且 ID 必须是唯一的。解决后，您可以获取并设置滑块的值，例如：
function sliderChange(val) {
document.getElementById('output').innerHTML = val; // get
}
document.getElementById('slider').value = 50; // set
The above example sets the slider to 50, then updates the output element as the slider changes.
上面的示例将滑块设置为 50，然后随着滑块的变化更新输出元素。
