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
        });

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 21 '15 at 13:44

Billybobbonnet

3,156
4
23
49

Thanks for suggestion but i achieve this functionality other plugin :) – Pankaj Jatav Jul 22 '15 at 06:58
out of curiosity, what package did you use? By the way, my advice with the reactive variable wasn't necessary, it is just a good practice. You could have achieved it with regular session vars. – Billybobbonnet Jul 22 '15 at 07:37
I used rcy:nouislider. – Pankaj Jatav Jul 22 '15 at 07:42

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

1 Answers1