दोहरे हैंडल एचटीएमएल 5 स्लाइडर्स के लिए मल्टीरेंज पॉलीफ़िल सपोर्ट

नई HTML5 रेंज इनपुट्स मात्राओं और तारीखों जैसे गतिशील चयनों के लिए शानदार हैं। लेकिन डिफ़ॉल्ट रेंज स्लाइडर कई हैंडल का समर्थन नहीं करता है.

दर्ज Multirange, ए पॉलीफ़िल कई हैंडल का समर्थन करने के लिए बनाई गई है यह ठीक से काम करता है और सभी प्रमुख ब्राउज़रों का समर्थन करता है.

यह है एक फ्री टूल और यह सबसे अच्छा तरीका प्रदान करता है मूल रूप से कई हैंडल जोड़ें, एक प्लगइन का उपयोग किए बिना। यह पॉलीफिल है दो संसाधन: ए जेएस फाइल और ए सीएसएस फ़ाइल. वे दोनों रेंज इनपुट पर काम करते हैं और आप कर सकते है दोनों को डाउनलोड करें मुख्य GitHub रेपो से.

ध्यान दें कि आपको उन ब्राउज़रों के साथ काम करने की आवश्यकता है जो पहले से ही रेंज इनपुट का समर्थन करते हैं डिफ़ॉल्ट रूप से। यह भी सीएसएस चर की आवश्यकता है जो सभी ब्राउज़रों में समर्थित नहीं हैं.

शुक्र है, मल्टीरेंज सीएसएस फॉलबैक का उपयोग करता है जहां एक के बजाय दो रेंज स्लाइडर का उपयोग किया जाता है। यह एक सही समाधान नहीं है, लेकिन यह अभी भी एक उपयोगी इंटरफ़ेस प्रदान करता है। प्लस साइड पर, यह सही बॉक्स से बाहर काम करता है कोई तार जुड़ा हुआ है.

केवल अपनी साइट पर फ़ाइलें जोड़ें और आप कर सकेंगे उपयोग विभिन्न गुण अपने स्लाइडर क्षेत्रों पर। आप भी कर सकते हैं इनपुट मानों के लिए सीमा निर्धारित करें अल्पविराम के साथ.

यहाँ एक है HTML का संक्षिप्त स्निपेट मल्टीरेंज स्लाइडर का उपयोग करना:

हैंडल हो सकता है एक दूसरे को घसीटते हुए अतीत और भी एक दूसरे के ऊपर छोड़ दिया. और रेंज इनपुट अभी भी कीबोर्ड नेविगेशन का समर्थन करता है जो पहुंच के लिए बहुत अच्छा है.

आल थे क़ौम तथा स्रोत कोड के नमूने मल्टीरेंज वेब पेज पर पाया जा सकता है, इसलिए यह जांचें कि क्या आप कभी ए की तलाश कर रहे हैं मल्टी-रेंज HTML स्लाइडर.