Cara menampilkan slider input rentang secara vertikal

Saya ingin menampilkan <input type="range" />kontrol slider secara vertikal. Saya hanya peduli dengan browser yang mendukung kontrol slider jangkauan.

Saya telah menemukan beberapa komentar dan referensi yang sepertinya menunjukkan bahwa mengatur tinggi lebih besar dari lebar akan menyebabkan browser mengubah orientasi secara otomatis, tetapi dalam pengujian saya, itu hanya berfungsi di Opera yang dulu berfungsi di Opera, tetapi sekarang tidak lagi. Bagaimana cara mengarahkan slider rentang HTML5 secara vertikal?

Pertama, atur tinggi lebih besar dari lebar. Secara teori, hanya ini yang Anda butuhkan. The HTML5 Spec menunjukkan sebanyak :

... UA menentukan orientasi kontrol dari rasio properti tinggi dan lebar yang ditentukan style-sheet.

Opera telah mengimplementasikannya dengan cara ini, tetapi Opera sekarang menggunakan WebKit Blink . Saat ini, tidak ada browser yang menerapkan penggeser vertikal yang hanya didasarkan pada tinggi yang lebih besar daripada lebar.

Terlepas dari itu, diperlukan pengaturan tinggi lebih besar dari lebar untuk mendapatkan tata letak yang tepat di antara browser. Menerapkan padding kiri dan kanan juga akan membantu tata letak dan pemosisian.

Untuk Chrome, gunakan -webkit-appearance: slider-vertical.

Untuk IE, gunakan writing-mode: bt-lr.

Untuk Firefox, tambahkan orient="vertical"atribut ke html. Sayang mereka melakukannya dengan cara ini. Gaya visual harus dikontrol melalui CSS, bukan 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" />

Penafian:

Solusi ini didasarkan pada implementasi browser saat ini dari properti CSS yang belum ditentukan atau belum diselesaikan. Jika Anda bermaksud untuk menggunakannya dalam kode Anda, bersiaplah untuk membuat penyesuaian kode saat versi browser yang lebih baru dirilis dan rekomendasi w3c diselesaikan.

MDN berisi peringatan eksplisit untuk tidak menggunakan -webkit-appearancedi web:

Jangan gunakan properti ini di situs Web: bukan hanya tidak standar, tetapi perilakunya berubah dari satu browser ke browser lain. Bahkan kata kunci nonetidak memiliki perilaku yang sama pada setiap elemen formulir di browser yang berbeda, dan beberapa tidak mendukungnya sama sekali.

Judul untuk demo penggeser vertikal dalam dokumentasi IE secara keliru menunjukkan bahwa pengaturan tinggi lebih dari lebar akan menampilkan penggeser rentang secara vertikal, tetapi ini tidak berfungsi. Di bagian kode , itu jelas tidak mengatur tinggi atau lebar, dan sebagai gantinya digunakan writing-mode. The writing-modeproperti, seperti yang diterapkan oleh IE , sangat kuat. Sayangnya, nilai-nilai yang didefinisikan dalam draft kerja spesifikasi saat ini pada tulisan ini, jauh lebih terbatas. Jika versi IE di masa depan menjatuhkan dukungan untuk bt-lrmendukung yang saat ini diusulkan vertical-lr(yang akan setara dengan tb-lr), bilah geser akan ditampilkan terbalik. Kemungkinan besar, versi masa depan akan memperpanjang ekstensiwriting-modeuntuk menerima nilai baru daripada menjatuhkan dukungan untuk nilai yang sudah ada. Tapi, ada baiknya mengetahui apa yang Anda hadapi.

Anda dapat melakukan ini dengan transformasi css, meskipun hati-hati dengan tinggi / lebar container. Anda juga mungkin perlu memposisikannya lebih rendah:

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

<input type="range"/>

atau setara dengan transformasi 3d:

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

Anda juga dapat menggunakan ini untuk mengganti arah slide dengan mengaturnya ke 180deg atau 90deg untuk horizontal atau vertikal.

Tanpa mengubah posisi menjadi absolut, lihat di bawah. Ini mendukung semua browser terbaru juga.

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

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

untuk browser sangat tua, Anda dapat menggunakan -sand-transform: rotate(10deg);dari CSS amplas

atau gunakan

pemilih awalan seperti -ms-transform: rotate(270deg);untuk IE9

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

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

Ini sangat sederhana. Saya telah menerapkan menggunakan -webkit-appearance: slider-vertical, Ini bekerja di 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;
}