세로 범위 입력 슬라이더: 방향 및 호환성

웹 개발 세계에서 슬라이더를 세로로 표시하면 사용자 경험을 향상시키고 특정 레이아웃을 수용할 수 있습니다. . 이 문서에서는 브라우저 호환성과 최신 구현을 고려하여 HTML5 슬라이더를 사용하여 세로 방향을 달성하는 기술을 살펴봅니다.

처음에는 슬라이더 요소의 높이와 너비를 조정하면 지원되는 브라우저에서 자동 수직 방향을 트리거합니다. 그러나 테스트 결과 이 ​​방법은 더 이상 신뢰할 수 없는 것으로 밝혀져 개발자는 대체 솔루션을 찾게 되었습니다.

현대적인 접근 방식

현재 버전의 Chrome 및 Firefox의 경우 가장 효율적인 솔루션입니다. 쓰기 모드 및 방향 속성을 활용하는 작업이 포함됩니다.

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

writing-mode를 수직-lr(또는 수직-rl)로 설정하면 쓰기 방향이 바뀌고, 방향: rtl(오른쪽에서 왼쪽)은 위쪽으로 밀어서 표준 규칙을 준수하면서 값을 줄입니다.

기존 브라우저 지원

이전 버전의 Chrome 및 기타 Chromium 기반 브라우저:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

모양 적용: Slider-vertical은 세로 방향을 강제하고 고정 너비 설정은 최신 브라우저에서 사용되는 기본 너비와 일치합니다.

Firefox 호환성

Firefox 이전 버전의 경우:

html {
    orient: vertical;
}

요소에 orient 속성을 추가하면 페이지의 모든 슬라이더에 수직 방향이 적용됩니다.

요약하면 이러한 기술은 슬라이더를 수직으로 움직여 다양한 브라우저에서 최적의 사용자 경험과 시각적 매력을 보장합니다.