Firefox에서 세로 방향 HTML5 range 슬라이더 구현하는 방법

Firefox에서 세로 방향 range 슬라이더가 가능할까요?

네, 이제 가능합니다. HTML5의 <input type="range"> 요소를 세로 방향으로 표시하는 기능은 Firefox 웹 브라우저에서도 정상적으로 동작합니다. 핵심 아이디어는 CSS 변형(transform) 속성을 활용해 가로 방향 슬라이더를 회전시키는 것입니다.

1단계: HTML 마크업 작성

먼저 기본적인 range 입력 요소를 작성합니다.

<input type = "range" name = "range" min = "0" max = "" step = "1" value = "2" />

2단계: CSS로 세로 방향 회전 처리

다음으로 CSS를 사용해 슬라이더를 270도 회전시켜 세로 방향으로 만듭니다. 크로스 브라우징을 위해 접두사(-webkit-, -moz-)와 표준 속성을 함께 선언하는 것이 좋습니다.

input[name = range] {
   position: relative;
   top: 150px;
   width: 200px;
   height: 13px;
   border: 0;
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   transform: rotate(270deg);
}

코드 설명

rotate(270deg) 값은 슬라이더를 시계 반대 방향으로 270도 회전시켜 세로 배치 효과를 만듭니다. top: 150px는 회전 후 레이아웃 위치를 조정하기 위한 값이며, 필요에 따라 조절하면 됩니다. 또한 최신 Firefox 버전에서는 별도의 회전 없이 writing-mode나 appearance: slider-vertical 계열의 속성, 그리고 orient="vertical" 속성 등을 통해 네이티브 세로 슬라이더를 지원하므로, 프로젝트 환경에 맞는 방식을 선택해 적용하시기 바랍니다.