Interactive / Reactive change of min / max values of 'Ion Range Slider'

Question

I am trying to make a reactive Range Slider. I have a dropdown list in which have a range. So whenever the dropdown change it will automatically change the range of range sidebar.

=========Template Helpers Code ================

$("#ionrange_1").ionRangeSlider({
        min: Session.get('min'),
        max: Session.get('max'),
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });

=========================================

I try this one also in my template Helper.

Define the range slider in Template Rendered.

var slider = $("#ionrange_1").data("ionRangeSlider");

slider.reset();

$("#ionrange_1").ionRangeSlider({
            min: Session.get('min'),
            max: Session.get('max'),
            type: 'double',
            prefix: "$",
            maxPostfix: "+",
            prettify: false,
            hasGrid: true
        });

Answer 1

You need to wrap the code on your template rendered function into an autorun. Moreover, you should use a reactive variable instead of a session variable

Try this:

var self = this;
self.autorun(function() {

    var slider = $("#ionrange_1").data("ionRangeSlider");
    
    slider.reset();
    
    $("#ionrange_1").ionRangeSlider({
                min: self.min.get(),
                max: self.max.get(),
                type: 'double',
                prefix: "$",
                maxPostfix: "+",
                prettify: false,
                hasGrid: true
            });

};

Each time you update the reactive var, this code should be excecuted (and your slider max/min values updated).

You need to also consider storing the current value into a reactive variable in order to set it back once you have reloaded your slider.