NoUIslider - Update-Bereich auf Anfrage

Question

Ich habe zwei Schieberegler und ich möchte den Bereich eines Schiebereglers basierend auf der Bewegung des anderen aktualisieren.

Zum Beispiel; slider_1 und slider_2 haben beide einen Bereich von 1-10. Wenn ich Slider_1 von Position 1 nach 2 verschiebe, ändert sich der Bereich von Slider_2 von 1-10 zu 1-20. Wenn ich slider_1 von Position 2 nach 3 verschiebe, hat slider_3 jetzt einen Bereich von 1-30 und so weiter.

ich initialisieren den Schieber wie folgt:

function slider() { 
     $(".slider").noUiSlider({ 
      orientation: "horizontal", 
      start: [0], 
      range: { 
       min: 0, 
       max: 10, 
      }, 
      connect: 'lower', 
      direction: "ltr", 
      step: 1, 
     }); 
    }; 

Der beste Weg, die ich bisher bei der Umsetzung diesen kommen kann, ist den ganzen Schieber dekonstruieren und neu initialisieren es mit dem neuen Bereich jedes Mal. Allerdings bin ich mir nicht sicher, wie man den Slider richtig dekonstruiert.

Irgendwelche Ideen, wie das gemacht werden sollte?

Answer 1

noUiSlider bietet eine update Funktion, die alle Einstellungen speichert, außer für neue, die Sie übergeben.

Ausführen des folgenden Code auf einem vorhandenen Schieber, zum Beispiel:

$('#slider').noUiSlider({ 
    range: { 
     min: 20, 
     max: 30 
    } 
}, true); 

den Bereich ändern. Beachten Sie, dass das zweite Argument auf true gesetzt ist; Es wird ermöglicht, einen Schieberegler neu zu erstellen. Weitere Informationen finden Sie in der documentation on rebuilding.

Edit:

In der nicht-jQuery-Version 8 können Sie tun:

slider.noUiSlider.updateOptions({ 
    range: { 
     'min': 20, 
     'max': 30 
    } 
}); 

Disclosure: Ich bin der Plugin Autor.

Answer 2

Sie können Updateoptions Funktion, indem ein Objekt als Argument verwenden.

config = { 
     orientation: "horizontal", 
     start: [100,200], 
     range: { 
      min: 0, 
      max: 200, 
     }, 
     connect: 'lower', 
     direction: "ltr", 
     step: 10, 
    }; 

und aktualisieren Sie dann den Schieberegler überall in Ihrem Javascript: Yo könnte Ihr eigenes „Konfigurationsobjekt“ programmatisch wie dies baut

$(".slider").updateOptions(config); 

Answer 3

Sie müssen destroy() anrufen und dann create(), um dynamisch den Bereich zu ändern . Es gibt keine Möglichkeit, den Bereich zu ändern, nachdem das Steuerelement gerendert wurde.

slider.noUiSlider.destroy() 
slider.noUiSlider.create({ 
    range: { 
     'min': 20, 
     'max': 30 
    } 
});