How to get immediate value /current value of paper-slider on change event or immediate value change event

Question

我试图改变纸张滑块的更改功能div的背景颜色与滑块的当前值，但未能获得滑块的值我尝试过 - 立即值更改或更改功能，但我不知道如何获取纸张滑块的当前值

Answer 1

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
}

Answer 2

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

Answer 3

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