किसी श्रेणी इनपुट स्लाइडर को लंबवत रूप से कैसे प्रदर्शित किया जाए

90

मैं एक <input type="range" />स्लाइडर नियंत्रण लंबवत प्रदर्शित करना चाहूंगा । मैं केवल उन ब्राउज़रों से चिंतित हूं जो रेंज स्लाइडर नियंत्रण का समर्थन करते हैं।

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

html  css 
— gilly3
स्रोत

जवाबों:

133

सबसे पहले, चौड़ाई से अधिक ऊंचाई सेट करें। सिद्धांत रूप में, यह आपको चाहिए। HTML5 Spec जितना पता चलता है :

... यूए ने शैली-शीट-निर्दिष्ट ऊंचाई और चौड़ाई के गुणों के अनुपात से नियंत्रण के उन्मुखीकरण का निर्धारण किया।

ओपेरा ने इसे इस तरह से लागू किया था, लेकिन ओपेरा अब WebKit Blink का उपयोग कर रहा है । आज तक, कोई भी ब्राउज़र ऊर्ध्वाधर स्लाइडर को केवल चौड़ाई से अधिक ऊंचाई पर आधारित नहीं करता है।

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

क्रोम के लिए, का उपयोग करें -webkit-appearance: slider-vertical।

IE के लिए, का उपयोग करें writing-mode: bt-lr।

फ़ायरफ़ॉक्स के orient="vertical"लिए, html में एक विशेषता जोड़ें । अफ़सोस कि उन्होंने इसे इस तरह किया। दृश्य शैलियों को सीएसएस के माध्यम से नियंत्रित किया जाना चाहिए, न कि HTML द्वारा।

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}
<input type="range" orient="vertical" />
स्निपेट का विस्तार करें

अस्वीकरण:

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

MDN में-webkit-appearance वेब पर उपयोग करने के खिलाफ एक स्पष्ट चेतावनी है :

इस संपत्ति का उपयोग वेब साइटों पर न करें : न केवल यह गैर-मानक है, लेकिन इसका व्यवहार एक ब्राउज़र से दूसरे ब्राउज़र में बदल जाता है। यहां तक ​​कि noneअलग-अलग ब्राउज़रों पर प्रत्येक फॉर्म तत्व पर कीवर्ड का व्यवहार समान नहीं है, और कुछ भी इसका समर्थन नहीं करते हैं।

IE प्रलेखन में ऊर्ध्वाधर स्लाइडर डेमो के लिए कैप्शन ग़लती से इंगित करता है कि चौड़ाई से अधिक ऊँचाई स्थापित करना एक श्रेणी स्लाइडर को लंबवत प्रदर्शित करेगा, लेकिन यह काम नहीं करता है। में कोड खंड , यह स्पष्ट रूप से सेट ऊंचाई या चौड़ाई, और बदले का उपयोग करता है नहीं है writing-mode। writing-modeसंपत्ति, आईई द्वारा कार्यान्वित के रूप में , बहुत मजबूत है। अफसोस की बात है, इस लेखन के रूप में कल्पना के वर्तमान कार्य मसौदे में परिभाषित मूल्य बहुत अधिक सीमित हैं। bt-lrवर्तमान में प्रस्तावित के पक्ष में IE ड्रॉप समर्थन के भविष्य के संस्करणों को vertical-lr(जो इसके बराबर होगा)tb-lr ) के को स्लाइडर को उल्टा प्रदर्शित करेगा। सबसे अधिक संभावना है, भविष्य के संस्करणों का विस्तार होगाwriting-modeमौजूदा मूल्यों के लिए ड्रॉप समर्थन के बजाय नए मूल्यों को स्वीकार करना। लेकिन, यह जानना अच्छा है कि आप किसके साथ काम कर रहे हैं।

— gilly3
स्रोत
2
+1 के बारे में अस्वीकरण के लिए -webkit-appearance- मुझे नहीं पता था कि। यह सब कुछ बदल देता है।
— रॉबिन विंस्लो
IE में टाइप = "रेंज" के साथ इनपुट तत्व चौड़ाई / ऊंचाई / प्रदर्शन मूल्यों के लिए बहुत संवेदनशील है। बूटस्ट्रैप का उपयोग करते समय इनमें से कुछ मान अनजाने में अधिलेखित हो सकते हैं (विशेषकर यदि आप उत्तर में कंबल सीएसएस का उपयोग नहीं करते हैं)। अपनी एक वर्टिकल रेंज के लिए मैं इस तरह से css का उपयोग करता हूं: .vert {-ms-राइटिंग-मोड: bt-lr; / * IE / -webkit- उपस्थिति: स्लाइडर-ऊर्ध्वाधर; / WebKit * / ऊंचाई: 210px; चौड़ाई: 20px; महत्वपूर्ण; गद्दी: 0 5px; प्रदर्शन: इनलाइन-ब्लॉक महत्वपूर्ण! }
— mp31415
1
मैं निश्चित रूप से प्रशंसक नहीं हूं !important। अपने चयनकर्ता को मजबूत करना हमेशा बेहतर होता है। सिर्फ इसके बजाय .vert, कुछ का उपयोग करें input[type=range].vert।
— gilly3
74

आप इसे सीएसएस ट्रांसफॉर्म के साथ कर सकते हैं, हालांकि कंटेनर की ऊंचाई / चौड़ाई से सावधान रहें। इसके अलावा, आपको इसे नीचे रखने की आवश्यकता हो सकती है:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}
<input type="range"/>
स्निपेट का विस्तार करें

या 3 डी परिवर्तन समकक्ष:

input[type="range"] {
   transform: rotateZ(270deg);
}

आप इसे स्लाइड की दिशा को क्रमशः क्षैतिज या ऊर्ध्वाधर के लिए 180deg या 90deg पर सेट करके स्विच करने के लिए भी उपयोग कर सकते हैं।

— MaxPRafferty
स्रोत
2
ध्यान दें कि आपको इसे 270 बनाने की आवश्यकता है यदि आप चाहते हैं कि यह उच्च मूल्यों के साथ मेल खाए और आपके द्वारा कम किए गए मान कम हो जाएं। अपना उत्तर संपादित किया।
— अगस्त
1
मैं इस दृष्टिकोण को पसंद करता हूं क्योंकि यह कस्टम सीएसएस स्टाइलिंग का समर्थन करता है। अन्य दृष्टिकोण के साथ, कस्टम स्टाइल स्लाइडर अधिनियम को अजीब बनाता है
— किम टी
1
यह सरल लेकिन शानदार है
— क्रिस्टोफर एम।
स्थिति के बजाय: निरपेक्ष आप प्रदर्शन का उपयोग कर सकते हैं: इनलाइन-ब्लॉक; परिवर्तन-उत्पत्ति के साथ।
— डेनिस गिफेलर
@DenisGiffeler निरपेक्ष स्थिति वास्तव में इस समाधान का हिस्सा नहीं है, यह एसओ उदाहरण को सही ढंग से प्रदर्शित करने का एक सुविधाजनक तरीका है। आपके उपयोग के मामले के आधार पर स्थिति को पूरा करने के कई तरीके हैं।
— 21
24

स्थिति को पूर्ण में बदलने के बिना, नीचे देखें। यह हाल ही के सभी ब्राउज़रों का समर्थन करता है।

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}
<input type="range" class="vranger"/>
स्निपेट का विस्तार करें

बहुत पुराने ब्राउज़रों के लिए, आप -sand-transform: rotate(10deg);से उपयोग कर सकते हैं CSS सैंडपेपर

या उपयोग करें

जैसे उपसर्ग चयनकर्ता -ms-transform: rotate(270deg);IE9 के लिए

— इफियानी चुक्वु
स्रोत
इसमें कुछ ऐसा भी शामिल है transform-origin: center left;कि स्लाइडर को बाएं-जस्टिफ़ाइड होना चाहिए न कि केंद्र-औचित्य।
— ड्रैगनलॉर्ड
3 

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}
<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>
स्निपेट का विस्तार करें

स्रोत: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

— महदी बशीरपुर
स्रोत
स्रोत लिंक में विभिन्न स्टाइल उपचार के साथ विभिन्न स्लाइडर्स दिखाने वाला डेमो शामिल है।
— जोश हबदास
0

यह बहुत सरल है। मैंने प्रयोग करके लागू किया था -webkit-appearance: slider-vertical, इसने chorme, Firefox, Edge में काम किया

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}
— आशिक डे
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.