ionRangeSlider is undefined, unable to update

Question

I'd like to reset the ionRangeSlider 'from' value the original when the bootstrap model closes. I'm however unable to reset it because the rangeSlideris undefined.

Code:

     $(document).ready(function () {
        $(".order").ionRangeSlider({
            min: 1,
            max: 20,
            type: 'single',
            step: 1,
            prettify: false,
            hasGrid: false,
        });

        $('#settingsModal').on('hidden.bs.modal', function () {

            // Find the range slider jquery element
            var rangeSliderElement = $(this).closest('.well').first('.order');

            // Get the start value
            var startValue = rangeSliderElement.data('from');

            // Get the ion range slider
            var rangeSlider = rangeSliderElement.data("ionRangeSlider");

            // Reset its value
            rangeSlider.update({
                from : startValue
            });
        });
    });

I do have multiple ionRangeSliders on my page.

What's going wrong?

Answer 1

Bootstrap was causing some issues, i couldn't use $(this) to search for ionRangeSlider in the event.

This works:

    var indexModule = $(this).closest('.col-md-3').index();

    // Get the ion range slider
    var rangeSlider = $("#modules .col-md-3").eq(indexModule).find('.order').data("ionRangeSlider");

    // Reset its value
    rangeSlider.reset();