jquery - “离子范围滑块”的最小值/最大值的交互/反应变化

Question

我正在尝试制作一个反应式范围滑块。我有一个下拉列表，其中有一个范围。因此，每当下拉列表更改时，它都会自动更改范围侧边栏的范围。

=========模板助手代码=================

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

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

我也在我的模板助手中尝试了这个。

在模板渲染中定义范围滑块。

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

您需要将模板rendered函数上的代码包装到autorun. 此外，您应该使用反应变量而不是会话变量

尝试这个：

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

};

每次更新响应变量时，都应该执行此代码（并且更新滑块的最大/最小值）。

您还需要考虑将当前值存储到反应变量中，以便在重新加载滑块后将其设置回来。