वर्टिकल रेंज इनपुट स्लाइडर: ओरिएंटेशन और अनुकूलता

वेब विकास की दुनिया में, स्लाइडर्स को लंबवत रूप से प्रस्तुत करना उपयोगकर्ता अनुभव को बढ़ा सकता है और विशिष्ट लेआउट को समायोजित कर सकता है . यह आलेख ब्राउज़र संगतता और आधुनिक कार्यान्वयन पर विचार करते हुए HTML5 स्लाइडर के साथ लंबवत अभिविन्यास प्राप्त करने की तकनीकों की खोज करता है।

प्रारंभ में, यह माना जाता था कि स्लाइडर तत्व की ऊंचाई और चौड़ाई को समायोजित करना होगा समर्थित ब्राउज़रों में स्वचालित वर्टिकल ओरिएंटेशन ट्रिगर करें। हालाँकि, परीक्षण से पता चला कि यह विधि अब विश्वसनीय नहीं है, जिससे डेवलपर्स वैकल्पिक समाधान तलाश रहे हैं।

आधुनिक दृष्टिकोण

क्रोम और फ़ायरफ़ॉक्स के वर्तमान संस्करणों के लिए, सबसे कुशल समाधान इसमें लेखन-मोड और दिशा गुणों का उपयोग शामिल है:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

लेखन-मोड को वर्टिकल-एलआर (या वर्टिकल-आरएल) पर सेट करने से लेखन की दिशा बदल जाती है, जबकि दिशा: आरटीएल (दाएं से बाएं) यह सुनिश्चित करता है कि ऊपर की ओर फिसलने से मानक परंपराओं का पालन करते हुए मूल्य कम हो जाता है।

विरासत ब्राउज़र समर्थन

क्रोम और अन्य क्रोमियम-आधारित ब्राउज़र के पुराने संस्करणों के लिए:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

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

फ़ायरफ़ॉक्स संगतता

फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए:

html {
    orient: vertical;
}