Problems with ajax calls on Nouislider

Question

I have multiple sliders on the same page, which I initialize them like this:

$(".percentage-slider").each(function (index, slider) {
    var url = $(this).data('ajax-url');
    var value = $(this).data('value');

    noUiSlider.create(slider, {
        start: value,
        connect: "lower",
        step: 1,
        range: {
            min: 0,
            max: 100
        },
        pips: {
            mode: 'range',
            density: 3
        }
    });

    slider.noUiSlider.on('change', function (values, handle) {
        save(url, {
            'name': 'percentage',
            'value': values[handle]

        });
    });
});

The problem is that I have an ajax call for a modal window that have other bunch of new sliders...

Modal.open($('#ajax-modal'), $(this).attr('href'), function () {
                            $(".percentage-slider").each(function (index, slider) {
                                var url = $(this).data('ajax-url');
                                var value = $(this).data('value');

                                $(slider).destroy();
                                noUiSlider.create(slider, {
                                    start: value,
                                    connect: "lower",
                                    behaviour: 'tap',
                                    step: 1,
                                    range: {
                                        min: 0,
                                        max: 100
                                    },
                                    pips: {
                                        mode: 'range',
                                        density: 5
                                    }
                                });

                                slider.noUiSlider.on('change', function (values, handle) {
                                    save(url, {
                                        'name': 'percentage',
                                        'value': values[handle]

                                    });
                                });
                            });
                        });

Always when I call the modal the sliders don't appear, the I tried to initialize them at the callback event of the ajax call, but then I got an error Slider was already initialized.. After looking for this error I found out that I need to destroy them, but how can I handle this kind of situation? P.S.: I really didn't like the idea of copy and paste the same code on modal... If someone could have a better solution I would appreciated it.

Thanks everyone