$element.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
我也调用了外部的rangelider.js页面,但仍然没有定义$ element.rangeslider。
答案 0 :(得分:0)
尝试此解决方案,您将等待加载脚本然后调用所需的功能。
$.getScript( "YourJS.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
//Preform here
}) ;
工作示例。
init(1,10);
function init(min,max){
$("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
//Preform here
initRangeSlider($("#slider"));
}) ;
}
function initRangeSlider(ele){
ele.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
//valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='io'></div>
&#13;