NoUIslider - Zakres aktualizacji na żądanie

Question

Mam dwa suwaki i chciałbym zaktualizować zakres jednego suwaka na podstawie ruchu drugiego.

Na przykład; suwak_1 i suwak_2 mają zakres od 1 do 10. Po przesunięciu suwaka_1 z pozycji 1 na 2 zakres suwaka_2 zmienia się z 1-10 na 1-20. Po przesunięciu suwaka_1 z pozycji 2 na 3 suwak_3 ma teraz zakres od 1 do 30 i tak dalej.

zainicjować suwak tak:

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

Najlepszym sposobem mogę wymyślić realizacji to tak daleko jest dekonstrukcja cały suwak i ponownie go zainicjować z nowej gamy każdym razem. Nie jestem jednak pewien, jak poprawnie zdekonstruować suwak.

Jakieś pomysły na to, jak to zrobić?

Answer 1

noUiSlider oferuje funkcję update, która zachowa wszystkie ustawienia, zachowując wszystkie nowe, które je przekażesz.

Running następujący kod na istniejącym suwaka, na przykład:

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

Will zmienić zakres. Zwróć uwagę, że drugi argument jest ustawiony na true; pozwoli na ponowne zbudowanie suwaka. Więcej informacji znajduje się w documentation on rebuilding.

Edit:

W non-jQuery wersji 8, można zrobić:

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

Ujawnienie: Jestem autor wtyczki.

Answer 2

Można użyć updateOptions funkcyjnych przekazując obiekt jako argument. Yo mógł zbudować swój własny „przedmiot konfiguracji” programowo tak:

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

a następnie zaktualizować suwak w dowolnym miejscu w JavaScript:

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

Answer 3

Trzeba zadzwonić destroy() a następnie create() dynamicznie zmienić zakres . Nie ma możliwości zmiany zakresu po wyrenderowaniu kontroli.

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