Polymer paper-slider数据绑定min属性时行为异常问题排查

这个异常的核心问题很明确——你把自定义元素min属性的类型定义成了String，但paper-slider的min属性要求的是数值类型（Number）。

当你把字符串类型的min值（比如'5'）绑定给paper-slider时，组件内部在计算滑动范围、当前值等核心逻辑时，会把这个字符串当作非有效值处理，直接打乱了滑块的计算逻辑，这就导致了你看到的「只能在两端滑动、值大范围异常变动」的问题。而绑定到max时正常，只是因为组件对max的类型兼容做了特殊处理，但这并不是正确的使用姿势。

修复后的代码 #

只需要把自定义元素中min属性的类型从String改为Number即可：

<link rel="import" href="/bower_components/paper-slider/paper-slider.html">
<dom-module id="slider-two">
  <template>
    <br>
    <br>
    <paper-slider pin min=[[min]]></paper-slider>
  </template>
  <script>
    Polymer({
      is: 'slider-two',
      properties: {
        min: {
          type: Number // 关键修改：从String改为Number
        }
      }
    });
  </script>
</dom-module>

使用说明 #

你的调用方式可以保持不变：

<slider-two min='5'></slider-two>

Polymer 1.x会自动将传入的字符串形式数值转换为Number类型，当然你也可以直接写min=5（不带引号），效果是一样的。

修改后，paper-slider就能正确识别min的数值，滑动逻辑会完全恢复正常。

内容的提问来源于stack exchange，提问作者arpanmangal