범위 입력 슬라이더를 세로로 표시하는 방법

Question 1

<input type="range" />슬라이더 컨트롤을 세로 로 표시하고 싶습니다 . 범위 슬라이더 컨트롤을 지원하는 브라우저에만 관심이 있습니다.

너비보다 높이를 높게 설정하면 브라우저가 자동으로 방향을 변경하는 것으로 보이는 주석과 참조를 찾았지만 테스트에서는 ~~Opera에서 작동하던 Opera~~ 에서만 작동 하지만 더 이상 작동하지 않습니다. HTML5 범위 슬라이더의 방향을 수직으로 조정하려면 어떻게해야합니까?

Question 2

먼저 너비보다 높이를 크게 설정합니다. 이론적으로는 이것이 필요한 전부입니다. HTML5 사양이 많이 제안한다 :

... UA는 스타일 시트에 지정된 높이 및 너비 속성의 비율에서 컨트롤의 방향을 결정했습니다.

Opera는 이러한 방식으로 구현했지만 Opera는 현재 ~~WebKit~~ Blink를 사용하고 있습니다. 현재로서는 높이가 너비보다 큰 경우에만 수직 슬라이더를 구현하는 브라우저가 없습니다.

그럼에도 불구하고 브라우저 사이에서 레이아웃을 올바르게 가져 오려면 너비보다 높이를 설정해야합니다. 왼쪽 및 오른쪽 패딩을 적용하면 레이아웃 및 위치 지정에도 도움이됩니다.

Chrome의 경우 -webkit-appearance: slider-vertical.

IE의 경우 writing-mode: bt-lr.

Firefox의 orient="vertical"경우 html에 속성을 추가하십시오 . 그들이 이런 식으로 한 것이 유감입니다. 비주얼 스타일은 HTML이 아닌 CSS를 통해 제어해야합니다.

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

스 니펫 확장

면책 조항 :

이 솔루션은 아직 정의되지 않았거나 완성되지 않은 CSS 속성의 현재 브라우저 구현을 기반으로합니다. 코드에서이를 사용하려는 경우 최신 브라우저 버전이 출시되고 w3c 권장 사항이 완료 될 때 코드를 조정할 준비를하십시오 .

MDN에는-webkit-appearance 웹에서의 사용 에 대한 명시적인 경고가 포함되어 있습니다 .

웹 사이트 에서는 이 속성을 사용하지 마십시오 . 비표준 일뿐만 아니라 브라우저마다 동작이 변경됩니다. 키워드조차도 none다른 브라우저의 각 양식 요소에서 동일한 동작이 아니며 일부는 전혀 지원하지 않습니다.

IE 문서 의 세로 슬라이더 데모에 대한 캡션은 높이를 너비보다 크게 설정하면 범위 슬라이더가 세로로 표시되지만 작동 하지 않음을 잘못 나타냅니다 . 에서 의 코드 부는 , 이는 명백히하지 세트 높이나 폭 대신 사용합니까 writing-mode. writing-mode속성은 IE에 의해 구현 된 매우 강력한 것입니다. 안타깝게도이 문서를 작성 하는 현재 사양의 작업 초안에 정의 된 값 은 훨씬 더 제한적입니다. IE의 향후 버전이 bt-lr현재 제안 된 vertical-lr(와 동등 함 tb-lr) 에 찬성하여 지원을 중단 하면 슬라이더가 거꾸로 표시됩니다. 대부분의 경우 향후 버전은writing-mode기존 값에 대한 지원을 삭제하지 않고 새 값을 수락합니다. 그러나 당신이 무엇을 다루고 있는지 아는 것이 좋습니다.

Question 3

컨테이너 높이 / 너비에주의해야하지만 css 변환으로이 작업을 수행 할 수 있습니다. 또한 더 낮게 배치해야 할 수도 있습니다.

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

<input type="range"/>

스 니펫 확장

또는 해당하는 3d 변환 :

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

또한이를 사용하여 가로 또는 세로에 대해 각각 180deg 또는 90deg로 설정하여 슬라이드의 방향을 전환 할 수 있습니다.

Question 4

위치를 절대로 변경하지 않고 아래를 참조하십시오. 이것은 모든 최신 브라우저도 지원합니다.

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

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

스 니펫 확장

아주 오래된 브라우저의 경우 CSS 샌드페이퍼-sand-transform: rotate(10deg); 에서 사용할 수 있습니다.

또는 사용

-ms-transform: rotate(270deg);IE9 와 같은 접두사 선택기

Question 5

.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

Question 6

매우 간단합니다. 나는 -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;
}