如何檢索和顯示滑塊范圍值？

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

在引用http://www.w3schools.com/jsref/event_oninput.asp后 ，您似乎可以在oninput的change事件上執行方法。

以下代碼檢索並顯示頁面上的數字。

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

METEOR WAY：此外，您可以使用change eventType並根據需要進行映射。 這在輸入改變狀態時有效。

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 2

RE：拖動HTML輸入元素時連續更改Session var：

如果您偵聽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
  }
})

Answer 3

如評論中所述，您有兩個具有相同ID的元素，ID必須是唯一的。 一旦解決了，您可以獲取並設置滑塊的值，如：

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

jsFiddle例子

上面的示例將滑塊設置為50，然后在滑塊更改時更新輸出元素。