CODEWITHSUNDEEP
javascriptjqueryhtmldynamicrangeslider
Hydra
Hydra

Reputation: 1

jQuery dynamically generated rangeslider

For a school assignment i'm writing a cordova app. I have a bunch of dynamically generated sliders for which I use the rangelsider.js. The normal code to use the rangeslider is this:

$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        //Do stuff
    },
    onSlideEnd: function () {
        console.log("slider id: " +this.id);
    },
    onSlide: function () {
        //Do stuff
    }
});

Now I want to make this work when the sliders are dynamically generated. Most info I find on how to do this is about buttons, like this:

$(document).on("click", ".button", function(){ //do stuff });

So when I try to do this with my sliders like this:

$('#sliders').on("change", '.rangeslider', function () {
    $('input[type="range"]').rangeslider({
        polyfill: false,
        onInit: function () {
            //do stuff
        },
        onSlideEnd: function () {
            console.log(this.id);
        },
        onSlide: function () {
            do stuff
        }
    });
});

Now this works with one exception. When the page page/app loads the sliders don't have any CSS and look just like the normal HTML sliders until I click on one of them. Which is logical because .rangeslider({...}) (which adds the CSS) doesn't happen until the "change" event triggers. So how would I fix this. I tried various things with .ready() and DOMNodeInserted to trigger the .rangeslider() when the sliders are loaded but none seem to work. I also found something about MutationObserver() but I don't really understand how to use it (in my code).

Disclaimer i'm very bad at JavaScript/jQuery so please give an example if you know a solution.

Thanks,

Upvotes: 0

Views: 79

Answers (1)

Atmiya Kolsawala
Atmiya Kolsawala

Reputation: 485

$(document).ready(function() {
$('input[type="range"]').rangeslider({
    polyfill: false,
    onInit: function () {
        //do stuff
    },
    onSlideEnd: function () {
        console.log(this.id);
    },
    onSlide: function () {
        do stuff
    }
});

});

Please make sure that this code is after the jquery is loaded and rangeslider.js is loaded. Thanks,

Upvotes: 3

Related Questions