如何刷新重新實例/刷新Pip Slider插件？

Question

我正在使用http://simeydotme.github.io/jQuery-ui-Slider-Pips/滑塊插件，並且無法重新實現插件值。我們有一個複選框，如果選中滑塊應顯示範圍，如果複選框未選中，則應設置最大範圍，用戶只能設置啓動範圍。反之亦然。

我使用的代碼是：

if (true) 
 
{ 
 
     $this.find(".div").slider({ 
 
      min: 0, 
 
      max: 50, 
 
      value: startMonth, 
 
      range: "max" 
 
     }); 
 
} 
 
else 
 
{ 
 
     $this.find(".div").slider({ 
 
      min: 0, 
 
      max: 50, 
 
      values: [10, 20], 
 
      range: true 
 
     }); 
 
}

我也嘗試過更新選項，但它表現怪異。

$this.find(".div").slider() 
 
.slider("option", "value", startMonth) 
 
.slider("option", "values", null) 
 
.slider("pips", "refresh");

Answer 1

我想，那一定是你null這是造成錯誤。你也不應該在設置選項之前調用：.slider()，那隻需要創建一個新的滑塊:) 。

更新：更改的設置咯，工作更穩定：https://jsfiddle.net/fbwsn4uc/2/

if(x) { 
    settings = { 
    max: 30, 
    range: "max", 
    value: 10 
    }; 
} else { 
    settings = { 
    min: 0, 
    max: 30, 
    range: true, 
    values: [ 5, 20 ] 
    }; 
} 

// refresh the slider with the new settings. 
$(".slider") 
    .slider("option", settings) 
    .slider("pips", "refresh"); 

Answer 2

我在做什麼是破壞滑塊和重新初始化。我不確定這是否是一種優雅的方式，但看起來工作正常。

$this.find(".div").slider("destroy").removeClass("ui - slider - pips"); 
 

 
if (true) 
 
    { 
 
    this.find(".div").slider({ 
 
       min: 0, 
 
       max: months.length - 1, 
 
       value: startMonth, 
 
       range: "max" 
 
      }) 
 
      .slider("pips", { 
 
       rest: "label", 
 
       labels: months 
 
      }); 
 
    } 
 
else 
 
    { 
 
      this.find(".div").slider({ 
 
       min: 0, 
 
       max: months.length - 1, 
 
       values: [startMonth, months.length - 2], 
 
       range: true 
 
      }) 
 
      .slider("pips", { 
 
       rest: "label", 
 
       labels: months 
 
      }); 
 

 
    }