CODEWITHSUNDEEP
javascripthtmlslider
meteorBuzz
meteorBuzz

Reputation: 3200

How can I retrieve and display slider range value?

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

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;

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

Upvotes: 7

Views: 66110

Answers (3)

user67177
user67177

Reputation: 31

RE: Changing Session var continuously while dragging HTML input element:

If you listen for the change event, the function will run only when the mouse is released. That means it won't run while dragging.

If you listen for the input event, the function will run even while dragging.

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

Upvotes: 3

meteorBuzz
meteorBuzz

Reputation: 3200

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

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

Upvotes: 16

j08691
j08691

Reputation: 208032

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:

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

jsFiddle example

The above example sets the slider to 50, then updates the output element as the slider changes.

Upvotes: 1

Related Questions