NoUIslider - İsteğe bağlı güncelleştirme aralığı

Question

İki sürgü var ve diğerinin hareketine bağlı olarak bir sürgü aralığını güncellemek istiyorum.

Örneğin; slider_1 ve slider_2 her ikisi de 1-10 aralığındadır. Slider_1 öğesini 1'den 2 konumuna getirdiğimde, slider_2'nin aralığı 1-10 ila 1-20 arasında değişir. Eğer slider_1 öğesini 2 konumundan 3 konumuna getirirsem, slider_3 şimdi 1-30 arasında bir aralığa sahiptir, vb.

Ben kaydırıcı şöyle başlatılamıyor:

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

Ben şimdiye kadar bu uygulamaya elde edebilirsiniz en iyi yolu tüm kaydırıcı yapısızlaştırabileceğimizi ve yeni aralığı ile her seferinde yeniden başlatmak olduğunu. Ancak, kaydırıcıyı düzgün şekilde nasıl yapılandıracağından emin değilim.

Bunun nasıl yapılması gerektiğine dair bir fikir var mı?

Answer 1

noUiSlider, tüm ayarları saklayacağınız bir update özelliği sunar;

örneğin, varolan kaydırıcısındaki Aşağıdaki kodu çalıştırma:

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

aralığını değiştirir. İkinci argümanın true olarak nasıl ayarlandığına dikkat edin; bir sürgüyü yeniden oluşturmaya izin verir. Daha fazla bilgi documentation on rebuilding'dadır.

Düzenleme: olmayan jQuery 8. versiyonda

, yapabileceğiniz:

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

Açıklanması: Ben eklenti yazarı.

Answer 2

Bir argüman olarak bir nesne ileterek updateOptions işlevi kullanabilirsiniz.

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

ve sonra GÜNCELLENECEK sürgüsünü her yerde JavaScript: Yo böyle programlı bir şekilde kendi "yapılandırma nesnesi" inşa edebileceğini

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

Answer 3

Sen destroy() çağırmanız gerekir ve daha sonra create() dinamik aralığını değiştirmek için . Kontrol işleminden sonra aralığı değiştirmenin bir yolu yoktur.