CSS로 input type range 커스텀 스타일하기

커스텀 스타일 가이드

CSS로 <input type="range">를 색상이나 크기, 모양 등 원하는 디자인으로 스타일하는 방법에 대해 알아보겠습니다.

CSS 스타일링

<input type="range">를 CSS로 스타일링하는 것은 아직까지 표준화되지 않았습니다.
그러나 크롬, 엣지 등의 Webkit 기반 브라우저와 파이어폭스는 각각 고유의 CSS 선택자를 제공합니다.

여기에 도움이 되는 다이어그램이 있습니다.

CSS 선택자

<input type="range">로 구현되는 슬라이더는 모든 브라우저에서 두 가지로 구성되어 있습니다.

가상 손잡이(virtual knob)라고도 불리우는 thumb
슬라이더의 표시기가 움직이는 그루브(groove)라고도 불리우는 track

thumb

thumb에 해당하는 Webkit 기반 브라우저와 파이어폭스의 가상 요소 선택자입니다.

thumb에 해당하는 Webkit 기반 브라우저와 파이어폭스의 가상 요소 선택자
Webkit 기반 브라우저	`::-webkit-slider-thumb`
파이어폭스	`::moz-range-thumb`

구문은 다음과 같습니다.

이 기능은 비표준입니다.
모든 사용자에게 적합하지 않을 수도 있습니다. 구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다. 브라우저 호환성을 참고하세요!

track

track에 해당하는 Webkit 기반 브라우저와 파이어폭스의 가상 요소 선택자입니다.

track에 해당하는 Webkit 기반 브라우저와 파이어폭스의 가상 요소 선택자
Webkit 기반 브라우저	`::-webkit-slider-runnable-track`
파이어폭스	`::-moz-range-track`

구문은 다음과 같습니다.

CSS

/* Webkit 기반 브라우저 - Chrome/Edge... */
[type="range"]::-webkit-slider-runnable-track {....}

/* 파이어폭스 */
[type="range"]::-moz-range-track {....}

커스텀 스타일 데모

Webkit 기반 브라우저와 파이어폭스 모두를 고려한 커스텀 스타일 데모입니다.

커스텀 스타일 데모에 적용한 CSS입니다. 주석에 관련된 스타일 가이드를 설명했습니다.

CSS

[type="range"] {
    appearance: none;
    cursor: pointer;
    outline: none;
    width: 100%;
    height: 1.5rem; /* thumb의 height와 일치 */
    margin: 0; /* reset margin */
    padding: 0; /* reset padding */
    background-color: transparent;
}

/* thumb */
[type="range"]::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    appearance: none;
    width: 1.5rem; /* height와 일치 */
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background-color: #007475;
    transition: all 0.15s ease-in-out;
    margin-top: calc((0.5rem - 1.5rem) * 0.5); /* calc((track의 height - thumb의 height) * 0.5) */
}
[type="range"]::-moz-range-thumb { /* 파이어폭스 */
    appearance: none;
    width: 1.5rem; /* height와 일치 */
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background-color: #007475;
    transition: all 0.15s ease-in-out;
}
[type="range"]:focus::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]:focus::-moz-range-thumb { /* 파이어폭스 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]::-webkit-slider-thumb:active { /* Webkit 기반 브라우저 */
    background-color: #99c7c7;
}
[type="range"]::-moz-range-thumb:active { /* 파이어폭스 */
    background-color: #99c7c7;
}

/* track */
[type="range"]::-webkit-slider-runnable-track { /* Webkit 기반 브라우저 */
    cursor: pointer;
    width: 100%;
    height: 0.5rem;
    background-color: #d3d9de;
    border-radius: 0.25rem;
}
[type="range"]::-moz-range-track { /* 파이어폭스 */
    cursor: pointer;
    width: 100%;
    height: 0.5rem;
    background-color: #d3d9de;
    border-radius: 0.25rem;
}

/* disabled 속성 적용 시 */
[type="range"]:disabled::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    pointer-events: none;
    background-color: #8b9aa7;
}
[type="range"]:disabled::-moz-range-thumb { /* 파이어폭스 */
    background-color: #8b9aa7;
}

코드 부연설명
appearance 속성은 각 브라우저에서 제공하는 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제어하는 데 사용됩니다.
appearance: none;으로 지정하면 기본 모양을 제공하고 있는 요소나 가상 요소는 본래의 모양이 제거합니다.

앞서 실제 적용된 커스텀 스타일 데모에 disabled 속성을 적용하면 다음과 같습니다.

코드 부연설명
disabled 속성은 컨트롤이 비활성된 상태임을 나타냅니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

브라우저 호환성

마지막 업데이트 정보: 2024-12-09

input type range로 커스텀 스타일하기와 관련된 CSS 선택자의 브라우저 호환성
데스크탑
선택자	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`::-webkit-slider-thumb`	83	83	지원하지 않음	지원하지 않음
`::-moz-range-thumb`	지원하지 않음	지원하지 않음	21	지원하지 않음
`::-webkit-slider-runnable-track`	83	83	지원하지 않음	지원하지 않음
`::-moz-range-track`	지원하지 않음	지원하지 않음	21	지원하지 않음