Wie aktualisiere ich das Pip Slider Plugin?

Question

Ich benutze http://simeydotme.github.io/jQuery-ui-Slider-Pips/ Slider-Plugin und Probleme bei der Wiederherstellung der Plugin-Werte. Wir haben ein Kontrollkästchen, wenn es aktiviert ist, sollte der Schieberegler einen Bereich anzeigen. Wenn das Kontrollkästchen deaktiviert ist, sollte der maximale Bereich festgelegt werden, und der Benutzer kann nur den Startbereich festlegen. und umgekehrt.

Der Code Ich verwende ist:

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

Ich habe auch versucht Optionen zu aktualisieren, aber es verhält sich seltsam.

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

Answer 1

ich denke, es Ihr null sein muß, die den Fehler verursacht. Auch sollten Sie nicht anrufen: .slider() kurz vor dem Einstellen der Optionen, das ist nur notwendig, um einen NEW Schieberegler zu erstellen :) .

Update: geänderten Einstellungen leicht, arbeitet konsistentere: 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

Was ich tue, ist der Schieber zu zerstören und neu initialisiert es. Ich bin mir nicht sicher, ob das ein eleganter Weg ist, aber es scheint gut zu funktionieren.

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

 
    }