「離子範圍滑塊」的最小值/最大值的交互/無功變化

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

}; 

每次更新的無功無功，這段代碼也應excecuted（和你的滑塊最大/最小值更新）。

您還需要考慮將當前值存儲到無功變量中，以便在重新加載滑塊後將其設置回去。