Javascript 聚合1.x：将jQuery范围滑块包装在聚合元素中_Javascript_Jquery_Polymer_Polymer 1.0_Rangeslider

Javascript 聚合1.x：将jQuery范围滑块包装在聚合元素中

javascript jquery polymer

Javascript 聚合1.x：将jQuery范围滑块包装在聚合元素中,javascript,jquery,polymer,polymer-1.0,rangeslider,Javascript,Jquery,Polymer,Polymer 1.0,Rangeslider,我试着把ion.RangeSlaider包在一个聚合物元件里，但我遇到了麻烦请告诉我如何在jsBin中工作 http://jsbin.com/dopanumada/1/edit?html，输出 <!doctype html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcompo

我试着把ion.RangeSlaider包在一个聚合物元件里，但我遇到了麻烦

请告诉我如何在jsBin中工作

http://jsbin.com/dopanumada/1/edit?html，输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">

  <script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    /** /
    References:
    http://jsfiddle.net/IonDen/qv6yrjrv/
    https://github.com/IonDen/ion.rangeSlider#experiments-playground
    /**/
    body {
        margin: 40px 15px;
        font-family: Arial, sans-serif;
        font-size: 12px;
    }
    .range-slider {
        position: relative;
        height: 80px;
    }
    .extra-controls {
        position: relative;
        border-top: 3px solid #000;
        padding: 10px 0 0;
    }
  </style>
  <div class="range-slider">
      <input type="text" class="js-range-slider" value="" />
  </div>
  <div class="extra-controls">
      Placeholder for some buttons to change slider behavior
  </div>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
      }
    });
  })();
</script>
<script>
  $(document).ready(function () {
    var $range = $(".js-range-slider");

    $range.ionRangeSlider({
        type: "double",
        min: 100,
        max: 1000,
        from: 300,
        to: 800
    });
  });
</script>

</dom-module>

<x-element></x-element>

</body>


/** /
参考资料：
http://jsfiddle.net/IonDen/qv6yrjrv/
https://github.com/IonDen/ion.rangeSlider#experiments-游乐场
/**/
身体{
利润率：40像素15像素；
字体系列：Arial，无衬线；
字体大小：12px；
}
.范围滑块{
位置：相对位置；
高度：80px；
}
.额外控制{
位置：相对位置；
边框顶部：3倍纯色#000；
填充：10px0；
}
用于更改滑块行为的某些按钮的占位符
（功能（）{
聚合物({
是：“x元素”，
特性：{
}
});
})();
$（文档）.ready（函数（）{
var$range=$（“.js范围滑块”）；
$range.IonRange滑块({
类型：“双”，
最低:100,，
最高：1000，
起:300,，
收件人：800
});
});

更新：当我执行以下操作时

将第二个

标记移到聚合元素模板外，并移到主文档正文（light DOM）中

在

中添加jQuery库资源

删除

$（文档）.ready（函数（）{

但是我仍然需要让它在聚合元素模板中使用javascript。
您已经接近了部分工作的示例，您在
ready
中调用了
IonRangeSlaider
函数。但是，您首先需要调用jQuery函数
$（）
使用滑块输入作为参数

ready: function(){ $(this.$.slider).ionRangeSlider({ type: "double", min: 100, max: 1000, from: 300, to: 800 }); }
正在工作的jsBin