Polymer 1.x: Wrapping a jQuery range slider inside a Polymer element
Question
I'm trying to wrap the ion.rangeSlider inside a Polymer element but I'm having trouble getting it working in a jsBin .
Please show me how to get this working in a jsBin.
<!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>
Update: It partially works as shown here when I do the following.
- Move the second
<script>tag outside the Polymer element template and into the main document body (light DOM). - Add the jQuery library resource in the
<head>. - Remove the
$(document).ready(function(){
But I still need to get it to work with the javascript inside the Polymer element template.
1 answers
solution1
1 ACCPTED 2016-01-25 07:48:50
You were close with your partially working example, where you called the ionRangeSlider function in ready . However, you first need to call the jQuery function $() with the slider input as an argument.
ready: function(){
$(this.$.slider).ionRangeSlider({
type: "double",
min: 100,
max: 1000,
from: 300,
to: 800
});
}
Here's a working jsBin
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.