Cách hiển thị thanh trượt nhập phạm vi theo chiều dọc

Tôi muốn hiển thị <input type="range" />điều khiển thanh trượt theo chiều dọc. Tôi chỉ quan tâm đến các trình duyệt hỗ trợ điều khiển thanh trượt phạm vi.

Tôi đã tìm thấy một số nhận xét và tham chiếu dường như chỉ ra rằng việc đặt chiều cao lớn hơn chiều rộng sẽ khiến trình duyệt tự động thay đổi hướng, nhưng trong thử nghiệm của tôi, điều đó chỉ hoạt động trong Opera được sử dụng để hoạt động trong Opera, nhưng không còn nữa. Làm cách nào để định hướng thanh trượt phạm vi HTML5 theo chiều dọc?

Đầu tiên, đặt chiều cao lớn hơn chiều rộng. Về lý thuyết, đây là tất cả những gì bạn cần. Thông số HTML5 gợi ý nhiều như sau:

... UA đã xác định hướng của điều khiển từ tỷ lệ của các thuộc tính chiều cao và chiều rộng do style-sheet chỉ định.

Opera đã thực hiện nó theo cách này, nhưng Opera hiện đang sử dụng WebKit Blink . Cho đến ngày nay, không có trình duyệt nào triển khai thanh trượt dọc chỉ dựa trên chiều cao lớn hơn chiều rộng.

Bất kể, việc đặt chiều cao lớn hơn chiều rộng là cần thiết để bố cục phù hợp giữa các trình duyệt. Áp dụng đệm bên trái và bên phải cũng sẽ giúp bố trí và định vị.

Đối với Chrome, hãy sử dụng -webkit-appearance: slider-vertical.

Đối với IE, hãy sử dụng writing-mode: bt-lr.

Đối với Firefox, hãy thêm một orient="vertical"thuộc tính vào html. Đáng tiếc rằng họ đã làm theo cách này. Kiểu trực quan nên được kiểm soát thông qua CSS, không phải 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" />

Tuyên bố từ chối trách nhiệm:

Giải pháp này dựa trên việc triển khai trình duyệt hiện tại của các thuộc tính CSS chưa được xác định hoặc chưa được hoàn thiện. Nếu bạn định sử dụng nó trong mã của mình, hãy chuẩn bị để thực hiện các điều chỉnh mã khi các phiên bản trình duyệt mới hơn được phát hành và các đề xuất w3c được hoàn thành.

MDN chứa một cảnh báo rõ ràng chống lại việc sử dụng -webkit-appearancetrên web:

Không sử dụng thuộc tính này trên các trang Web: nó không chỉ không theo tiêu chuẩn mà còn thay đổi hành vi của nó từ trình duyệt này sang trình duyệt khác. Ngay cả từ khóa nonecũng có hành vi không giống nhau trên mỗi phần tử biểu mẫu trên các trình duyệt khác nhau và một số không hỗ trợ nó.

Chú thích cho bản trình diễn thanh trượt dọc trong tài liệu IE chỉ ra một cách sai lầm rằng việc thiết lập chiều cao lớn hơn chiều rộng sẽ hiển thị thanh trượt phạm vi theo chiều dọc, nhưng điều này không hoạt động. Trong phần mã , nó rõ ràng không đặt chiều cao hoặc chiều rộng, và thay vào đó sử dụng writing-mode. Các writing-modebất động sản, như thực hiện bởi trình duyệt IE , là rất mạnh mẽ. Đáng buồn thay, các giá trị được xác định trong bản nháp hiện tại của thông số kỹ thuật tính đến thời điểm viết bài này, bị hạn chế hơn nhiều. Nếu các phiên bản tương lai của IE bỏ hỗ trợ bt-lrđể có lợi cho đề xuất hiện tại vertical-lr(tương đương với tb-lr), thanh trượt sẽ hiển thị lộn ngược. Rất có thể, các phiên bản trong tương lai sẽ mở rộngwriting-modeđể chấp nhận các giá trị mới thay vì bỏ hỗ trợ cho các giá trị hiện có. Nhưng, thật tốt khi biết bạn đang phải đối mặt với vấn đề gì.

Bạn có thể làm điều này với các biến đổi css, mặc dù hãy cẩn thận với chiều cao / chiều rộng của vùng chứa. Ngoài ra, bạn có thể cần đặt nó thấp hơn:

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

<input type="range"/>

hoặc biến đổi 3d tương đương:

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

Bạn cũng có thể sử dụng điều này để chuyển hướng của trang chiếu bằng cách đặt nó thành 180deg hoặc 90deg cho ngang hoặc dọc tương ứng.

Không thay đổi vị trí thành tuyệt đối, xem bên dưới. Điều này cũng hỗ trợ tất cả các trình duyệt gần đây.

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

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

cho các trình duyệt rất cũ, bạn có thể sử dụng -sand-transform: rotate(10deg);từ CSS giấy nhám

hoặc dùng

bộ chọn tiền tố chẳng hạn như -ms-transform: rotate(270deg);cho 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>

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

Nó rất đơn giản. Tôi đã triển khai bằng cách sử dụng -webkit-appearance: slider-vertical, Nó hoạt động trong 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;
}