CODEWITHSUNDEEP
javascriptjquerypolymerpolymer-1.0
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Wrapping a jQuery plugin inside a Polymer 1.x element

I am trying to move all the necessary jQuery code from inside the <script> tag here to inside the Polymer <dom-module>.

When I uncomment the code inside the <dom-module> and comment out the code inside the <script> tag, I expect the slider to appear and function properly as it did to begin with — similar to the below diagram. Instead, the browser renders a plain input element — not a slider.

Here is the jsBin.

Please provide the correct code to achieve the desired result.

Interval range slider input

http://jsbin.com/ceripuviwu/1/edit?html,output 
<!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">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <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
      /**/
      </style>
      <input type="text" class="js-range-slider" id="slider" value="" />
    </template>
    <script>
      (function() {
        Polymer({
          is: "x-element"
          /** /
          Does not work. Want to cut and paste below <script> to move it here.
          /** /
          ,
          ready: function(){
            this.$.slider.ionRangeSlider({
              type: "double",
              min: 100,
              max: 1000,
              from: 300,
              to: 800
            });
          }
          /**/
        });
      })();
    </script>
  </dom-module>
  <x-element></x-element>
  <script>
    /** /
    This works. Want to cut and paste to move it above, inside the <dom-module>
    /**/
    $(".js-range-slider").ionRangeSlider({
      type: "double",
      min: 100,
      max: 1000,
      from: 300,
      to: 800
    });
    /**/
  </script>
</body>

Upvotes: 0

Views: 1175

Answers (1)

Maria
Maria

Reputation: 5604

In the following line of code, you are trying to call a function defined by a jQuery plugin on an HTMLElement.

this.$.slider.ionRangeSlider(

However, that function is undefined there. You first need to wrap it with jQuery. That is what you are doing further down. Note the $().

$(".js-range-slider").ionRangeSlider({

So change your first line to 

$(this.$.slider).ionRangeSlider({

Here's the jsBin.

Upvotes: 2

Related Questions