Aralık girişi kaydırıcısı dikey olarak nasıl görüntülenir

<input type="range" />Dikey olarak bir kaydırıcı kontrolü görüntülemek istiyorum . Yalnızca aralık kaydırıcı kontrolünü destekleyen tarayıcılarla ilgileniyorum.

Yüksekliğin genişlikten daha büyük ayarlanmasının tarayıcının otomatik olarak yönlendirmeyi değiştirmesine neden olacağını gösteren bazı yorumlar ve referanslar buldum, ancak benim testlerimde bu sadece Opera'da çalışıyordu ama artık Opera'da çalışıyordu. Bir HTML5 aralığı kaydırıcısını dikey olarak nasıl yönlendirebilirim?

İlk önce yüksekliği genişlikten büyük olarak ayarlayın. Teorik olarak, ihtiyacınız olan tek şey bu. HTML5 Spec kadar sürmektedir :

... UA, denetimin yönünü stil sayfasında belirtilen yükseklik ve genişlik özelliklerinin oranından belirledi.

Opera bu şekilde uyguladı, ancak Opera şimdi WebKit Blink kullanıyor . Bugün itibariyle, hiçbir tarayıcı yalnızca yüksekliğin genişlikten büyük olmasına dayalı bir dikey kaydırıcı uygulamamaktadır.

Ne olursa olsun, düzeni tarayıcılar arasında doğru bir şekilde elde etmek için yüksekliği genişlikten daha büyük ayarlamak gerekir. Sol ve sağ dolgu uygulamak da düzen ve konumlandırmaya yardımcı olacaktır.

Chrome için kullanın -webkit-appearance: slider-vertical.

IE için kullanın writing-mode: bt-lr.

Firefox için html'ye bir orient="vertical"öznitelik ekleyin . Bu şekilde yaptıkları için yazık. Görsel stiller HTML ile değil CSS ile kontrol edilmelidir.

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" />

Sorumluluk Reddi Beyanları:

Bu çözüm, henüz tanımlanmamış veya sonlandırılmamış CSS özelliklerinin mevcut tarayıcı uygulamalarına dayanmaktadır. Kodunuzda kullanmayı düşünüyorsanız, daha yeni tarayıcı sürümleri çıktıkça ve w3c önerileri tamamlandıkça kod ayarlamaları yapmaya hazır olun .

MDN-webkit-appearance , web'de kullanıma karşı açık bir uyarı içerir :

Kullanmayın Web sitelerinde bu özelliği: sadece o standart dışı, ama başka bir tarayıcıdan onun davranış değişikliğidir. Anahtar kelime bile, nonefarklı tarayıcılardaki her form öğesinde aynı davranışa sahip değildir ve bazıları bunu hiç desteklememektedir.

Dikey kaydırma demo için başlık IE belgelerinde hatalı dikey aralık kaydırma gösterecektir genişliğinden daha bu ayar yüksekliği daha yüksek gösterir, ancak bu yapar değildir çalışır. Olarak kod bölümü , bu açıkça değil set yüksekliğini veya genişliğini ve bunun yerine kullanımları yapar writing-mode. writing-modeÖzelliği, IE tarafından uygulanan , çok sağlamdır. Ne yazık ki, bu yazı itibariyle şartnamenin mevcut çalışma taslağında tanımlanan değerler çok daha sınırlıdır. IE'nin gelecekteki sürümleri desteği bt-lrşu anda önerilenin lehine bırakırsa vertical-lr(buna eşdeğer olacaktır tb-lr), kaydırıcı baş aşağı görünecektir. Büyük olasılıkla, gelecekteki sürümler,writing-modemevcut değerler için desteği düşürmek yerine yeni değerleri kabul etmek. Ama neyle karşı karşıya olduğunuzu bilmek güzel.

Bunu css dönüşümleriyle yapabilirsiniz, ancak konteyner yüksekliği / genişliğine dikkat edin. Ayrıca daha aşağı konumlandırmanız gerekebilir:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

veya 3d dönüşüm eşdeğeri:

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

Bunu, sırasıyla yatay veya dikey için 180 derece veya 90 derece olarak ayarlayarak slaydın yönünü değiştirmek için de kullanabilirsiniz.

Pozisyonu mutlak olarak değiştirmeden aşağıya bakın. Bu, tüm yeni tarayıcıları da destekler.

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

çok eski tarayıcılarda kullanabileceğiniz -sand-transform: rotate(10deg);gelen CSS zımpara kağıdı

ya da kullan

-ms-transform: rotate(270deg);IE9 gibi önek seçici

.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>

Kaynak: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Çok basit. Kullanarak uyguladım -webkit-appearance: slider-vertical, chorme, Firefox, Edge'de çalıştı

<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;
}