Polymer 1.x：将 jQuery 范围滑块包裹在 Polymer 元素内

Question

我正在尝试将 ion.rangeSlider 包裹在 Polymer 元素中，但我遇到了问题 getting it working in a jsBin。

请告诉我如何让它在 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>

更新：It partially works as shown here 当我执行以下操作时。

将第二个 <script> 标签移到 Polymer 元素模板之外并移到主文档正文中（浅色 DOM）。
在 <head> 中添加 jQuery 库资源。
删除 $(document).ready(function(){

但我仍然需要让它与 javascript 内部 Polymer 元素模板一起使用。

Answer 1

您已经完成了您的部分工作示例，您在其中调用了 ready 中的 ionRangeSlider 函数。但是，您首先需要使用滑块输入作为参数调用 jQuery 函数 $()。

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

Here's 一个工作的 jsBin

Polymer 1.x：将 jQuery 范围滑块包裹在 Polymer 元素内

Polymer 1.x: Wrapping a jQuery range slider inside a Polymer element

javascript

jquery

polymer

polymer-1.0

rangeslider