Native ड्यूल रेंज इनपुट

 (muffinman.io)
2 पॉइंट द्वारा GN⁺ 2024-12-06 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • @stanko/dual-range-input एक native dual range input लाइब्रेरी है जो दो native HTML range inputs का उपयोग करती है।
    • Native inputs का उपयोग करके यह सभी default interaction और accessibility फीचर्स को बनाए रखती है।
    • यह लगभग 50 lines के JavaScript और CSS से बनी है।
  • यह क्यों ज़रूरी है
    • इसे generative drawing tool में parameters को adjust करने वाले UI के लिए इस्तेमाल किया गया, जहाँ minimum और maximum sliders की ज़रूरत थी।
    • मौजूदा solutions JavaScript पर निर्भर थे और drag तथा accessibility फीचर्स को फिर से implement करते थे।
    • Native HTML range inputs का उपयोग करते हुए, track पर click करने पर सबसे नज़दीकी slider को उस value पर जाना चाहिए।
  • यह कैसे काम करता है
    • दो inputs को साथ-साथ रखा जाता है, और input बदलने पर दोनों values का midpoint calculate किया जाता है।
    • minimum और maximum attributes को midpoint पर set किया जाता है, और input की width update की जाती है।
  • Input का आकार बदलना
    • Input की width calculate करते समय यह ध्यान रखना होता है कि track, actual input width से छोटा होता है।
    • इसे सरल तरीके से input की width में thumb width जोड़कर calculate किया जाता है।
    • Thumb की अतिरिक्त width को समायोजित करने के लिए input wrapper में padding जोड़ा जाता है।
  • Click पर thumb को move करना
    • Inputs का आकार इस तरह बदला जाता है कि वे midpoint पर मिलें, और click करने पर सबसे नज़दीकी thumb उस value पर चला जाए।
    • Debug mode चालू करने पर midpoint को आसानी से देखा जा सकता है।
  • Styling
    • CSS का उपयोग करके range inputs को style किया जा सकता है।
    • Track और thumb की styling सरल है, और track के बीच के जुड़े हिस्से में border radius हटा दिया जाता है।
  • Theme
    • Theme को आसानी से बदलने के लिए कई variables expose किए गए हैं।
    • Default values दी गई हैं, और variables को override करके theme बनाई जा सकती है।
  • Gradient
    • CSS gradient का उपयोग करके selected range को paint किया जाता है।
    • Gradient सेट करने के लिए --dri-gradient-position variable का उपयोग किया जाता है, और code में इसे width के साथ update किया जाता है।
  • निष्कर्ष
    • यह पोस्ट विचारों को व्यवस्थित करने के लिए लिखी गई है, और उम्मीद है कि यह native elements को आज़माने की प्रेरणा देगी।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-12-06
Hacker News राय
  • स्लाइडर का बीच वाला हिस्सा हमेशा मूव किया जा सकना चाहिए, और Unity के उदाहरण की तरह दोनों handles को एक साथ मूव किया जा सकना चाहिए
  • लेखक ने अपनी generative art के लिए एक slider बनाया, और numbers दर्ज करने की तुलना में slider को drag करके image changes देखना पसंद करता है
  • एक bug है जिसमें slider को 100-100 पर सेट करने के बाद 99-99 में बदला नहीं जा सकता, और यह समस्या slider के सिरों पर आसानी से होती है
  • उनका मानना है कि HTML <input type=range> में dual value implementation की ज़रूरत है, और Firefox में handle पर क्लिक करने पर value एक step बदल जाने वाला bug है
  • कंपनी design system में एक intern ने ऐसा ही POC बनाया था, लेकिन input values उछलने की समस्या आई, इसलिए दूसरे intern ने overlapping input ranges के साथ एक solution सुझाया
  • "native" शब्द पर बहस हो सकती है, और उनका मानना है कि अगर JavaScript चाहिए तो वह अब native नहीं रहा
  • किसी खास feature को implement करने के लिए React का इस्तेमाल किया, लेकिन frontend development में सहज न होने के कारण मुश्किलें आईं
  • jQuery UI slider इस्तेमाल किया, लेकिन एक single slider के लिए jQuery और jQuery UI दोनों जोड़ने पड़े
  • यह JavaScript के बिना भी काम कर सकता है, बस CSS की width calculation को slider value पर निर्भर करने के लिए और अधिक परिष्कृत बनाना होगा
  • यह bug report करने की सही जगह है या नहीं, इस पर संदेह है, और पहले दो examples के handles touch interaction को रोककर scrolling में बाधा डालते हैं