如何在更改事件或立即值更改事件中获取纸张滑块的立即值/当前值

Question

我正在尝试使用滑块的当前值更改纸张滑块的更改功能上的div的背景颜色但是未能获得滑块的值我尝试过 - 立即值更改或更改功能，但我不知道如何获得纸张滑块的当前值

Answer 1

嗯，根据documentation，paper-slider有两种不同的价值：

• value 代表当前值的数字。
• immediateValue 滑块的直接值。用户拖动滑块时会更新此值。

可以直接在paper-slider元素上访问这些属性。

当用户拖动滑块时，会连续触发第一个事件：immediate-value-change。 当用户停止拖动滑块时，会触发另外两个事件：change和value-change。两者之间的区别在于change事件仅在用户的交互中触发。

考虑到这些信息，您可以在主机元素中添加以下代码段（您的滑块应具有slider ID，但您显然可以更改它：）

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

我知道获取滑块值的最简单方法是为其分配声明性变量并在javascript中使用它。

例如

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

然后在js

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

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

编辑：使用事件发件人值的原始帖子返回事件开头的值而不是结束值

Answer 3

我建议听一下change事件，然后访问srcElement.value来获取当前值

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