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

Question

我正在尝试更改 div 的背景颜色，以使用滑块的当前值改变纸张滑块的功能，但未能获得滑块的值我尝试了即时值更改或更改函数，但我不知道如何获取纸滑块的当前值

Answer 1

我建议监听更改事件，然后访问 srcElement.value 以获取当前值

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

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

编辑：原始 post 使用事件发送者值返回事件开始的值而不是结束值

Answer 3

嗯，根据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
}

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

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

javascript

event-handling

polymer