JQuery динамически генерируемый диапазонный слайдер

Для школьного задания пишу приложение Cordova. У меня есть несколько динамически генерируемых слайдеров, для которых я использую rangelsider.js. Обычный код для использования ползунка диапазонов:

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

Теперь я хочу, чтобы эта работа работала, когда ползунки генерируются динамически. Большая часть информации, которую я нахожу о том, как это сделать, касается кнопок, например:

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

Итак, когда я пытаюсь сделать это с помощью моих ползунков, вот так:

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

Теперь это работает с одним исключением. Когда страница страницы / приложение загружается, ползунки не содержат CSS и выглядят так же, как обычные ползунки HTML, пока я не нажму на один из них. Это логично, потому что .rangeslider({...}) (который добавляет CSS) не происходит до тех пор, пока не сработает событие «изменение». Так как бы мне это исправить. Я пробовал разные вещи с .ready() и DOMNodeInserted, чтобы запускать .rangeslider(), когда ползунки загружены, но, похоже, ни один из них не работает. Я также нашел кое-что о MutationObserver(), но я действительно не понимаю, как его использовать (в моем коде).

Отказ от ответственности Я очень плохо разбираюсь в JavaScript / jQuery, поэтому, если вы знаете решение, приведите пример.

Спасибо,