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

2022-01-24 00:00:00 slider javascript html

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

How can I retrieve and display the slider value from the input range?

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

I am using Meteor and prefer javascript code.

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

推荐答案

引用后http://www.w3schools.com/jsref/event_oninput.asp看来您可以根据 oninput 的更改事件执行方法.

After referencing http://www.w3schools.com/jsref/event_oninput.asp it seems you can execute a method upon the change event of 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

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 eventType 并按照您的意愿进行映射.这在输入更改状态时有效.

THE METEOR WAY: Additionally, you may use the change eventType and map it how you want. This works when an input changes state.

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

相关文章