如何检索和显示滑块范围值？

Question

如何从输入范围中检索和显示滑块值？

我正在使用 Meteor 并且更喜欢 javascript 代码。

  <input id="slider" type="range" min="50" max="100" step="10" oninput="sliderChange(this.value)">

  <output id="sliderVal"> </output>

javascript;

function sliderChange(val) {
document.getElementById('sliderVal').innerHTML = val;
}

Answer 1

如评论中所述，您有两个具有相同 ID 的元素，并且 ID 必须是唯一的。解决后，您可以获取并设置滑块的值，如：

function sliderChange(val) {
    document.getElementById('output').innerHTML = val; // get
}
document.getElementById('slider').value = 50; // set

jsFiddle example

以上示例将滑块设置为 50，然后随着滑块的变化更新输出元素。

Answer 2

引用后http://www.w3schools.com/jsref/event_oninput.asp 看来你可以在 oninput.

的更改事件上执行一个方法

以下代码检索并显示页面上的数字。

<template name="myTemplate>
 <input id="slider" type="range" min="50" max="100" step="10"  value="50">
 <output id="output"></output>
</template>

client.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)
}

流星方式： 此外，您可以使用 change 事件类型并根据需要映射它。这在输入更改状态时有效。

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
  }
})

Answer 3

回复：拖动时连续更改会话变量 HTML 输入元素：

如果您侦听 change 事件，该函数将运行只有在鼠标被释放时才会执行。这意味着它不会在拖动时运行。

如果您侦听 input 事件，即使在拖动时该函数也会运行。

流星之路:

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
  }
})

如何检索和显示滑块范围值？

How can I retrieve and display slider range value?

html

javascript

slider