i am trying to change the background color of div on change function of paper slider with slider's current value but failed to get value of slider i have tried on-immediate-value-change or on-change function ,but i don't know how to get current value of paper-slider

i am trying to change the background color of div on change function of paper slider with slider's current value but failed to get value of slider i have tried on-immediate-value-change or on-change function ,but i don't know how to get current value of paper-slider

• javascript
• event-handling
• polymer

3 Answers 3

Well, according to the documentation, there are two different kinds of value for the paper-slider:

• value The number that represents the current value.
• immediateValue The immediate value of the slider. This value is updated while the user is dragging the slider.

One can access these properties directly on the paper-slider element.

While the user drags the slider, a first event is fired continuously: immediate-value-change. When the user stops dragging the slider, two other events are fired: change and value-change. The difference between the two is that the change event is only fired on user's interaction.

Considering these informations, you may add to your host element the following snippets (your slider should have a slider id, but you can obviously change that):

listeners: {
    'immediate-value-change': 'immediateValueChangeHandler',
    'change': 'changeHandler'
},

immediateValueChangeHandler: function (e) {
    var value = this.$.slider.immediateValue;
    // do something
},

changeHandler: function (e) {
    var value = this.$.slider.value;
    // do something
}

easiest way i know of to get the value of a slider is to assign it a declarative variable and use that in your javascript.

example

 <paper-slider min="0" max="100" value="{{sliderValue}}" on-change="{{sliderChange}}"></paper-slider>

then in js

sliderChange: function () {
  var value = this.sliderValue;
  // do something with value
}

plunker example http://plnkr.co/edit/gihpf5aZH4obhquaDtZQ?p=preview

edit: original post using event sender value returned the value of the beginning of the event and not the end value

I would suggest listening to the change event and then accessing the srcElement.value to get the current value

sliderElement.addEventListener('change', function(e) {
    console.log(e.type, e.srcElement.value);
  });