NoUIslider - मांग पर अद्यतन सीमा

Question

मेरे पास दो स्लाइडर्स हैं और मैं दूसरे के आंदोलन के आधार पर एक स्लाइडर की श्रेणी को अपडेट करना चाहता हूं।

उदाहरण के लिए; स्लाइडर_1 और स्लाइडर_2 दोनों में 1-10 की एक श्रृंखला है। जब मैं स्लाइडर_1 को स्थिति 1 से 2 तक ले जाता हूं, स्लाइडर_2 की रेंज 1-10 से 1-20 तक बदल जाती है। यदि मैं स्लाइडर_1 को स्थिति 2 से 3 तक ले जाता हूं, तो स्लाइडर_3 में अब 1-30 से एक सीमा है, और इसी तरह।

मैं बहुत की तरह स्लाइडर प्रारंभ:

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

सबसे अच्छा तरीका है मैं इस अब तक लागू करने के साथ आ सकते हैं पूरे स्लाइडर deconstruct, और हर बार नई रेंज के साथ पुनः आरंभ कर रहा है। हालांकि मुझे स्लाइडर को सही तरीके से डिज़ाइन करने के बारे में अनिश्चितता है।

यह कैसे किया जाना चाहिए इस पर कोई विचार?

Answer 1

noUiSlider update सुविधा प्रदान करता है, जो सभी सेटिंग्स को रखेगा, जो भी आप इसे पास करते हैं उसे सहेज लेंगे।

एक मौजूदा स्लाइडर पर निम्नलिखित कोड चल रहा है, उदाहरण के लिए:

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

श्रेणी बदल जाएगा। ध्यान दें कि दूसरा तर्क true पर कैसे सेट किया गया है; यह एक स्लाइडर को फिर से बनाने की अनुमति देगा। अधिक जानकारी documentation on rebuilding में है।

संपादित करें:

गैर jQuery संस्करण 8 में, आप कर सकते हैं:

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

प्रकटीकरण: मैं प्लगइन लेखक हूँ।

Answer 2

आप एक तर्क के रूप में एक वस्तु पारित करके updateOptions समारोह उपयोग कर सकते हैं। अपने जावास्क्रिप्ट में कहीं भी

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

और फिर अद्यतन स्लाइडर: यो इस तरह अपने खुद के "विन्यास वस्तु" बना सकते हैं प्रोग्राम के

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

Answer 3

आप destroy() कॉल करने की आवश्यकता है और फिर create() गतिशील सीमा बदलने के लिए । नियंत्रण प्रदान करने के बाद सीमा को बदलने का कोई तरीका नहीं है।

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