'Ion Range Slider' 的最小值/最大值的交互/反应变化

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 中。此外，您应该使用 a reactive variable 而不是会话变量

试试这个：

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

};

每次更新反应变量时，都应执行此代码（并更新滑块 max/min 值）。

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

'Ion Range Slider' 的最小值/最大值的交互/反应变化

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

jquery

meteor

rangeslider