웹 페이지에서 볼륨 조절이나 필터 설정 등에 사용되는 범위 슬라이더(Range Slider)는 기본 스타일만으로는 디자인이 아쉬울 때가 많습니다. CSS와 JavaScript를 활용하면 브라우저 기본 슬라이더를 자신만의 개성 있는 디자인으로 손쉽게 바꿀 수 있습니다.
이 글에서는 <input type="range"> 요소를 커스터마이징하여, 마우스를 올리면 투명도가 변하고 현재 값을 실시간으로 화면에 표시해 주는 슬라이더를 만드는 방법을 알아보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #e478ff;
outline: none;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 20px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
appearance: none;
width: 45px;
height: 45px;
background: rgb(200, 255, 0);
border: 6px solid rgb(0, 105, 44);
cursor: pointer;
}
.slider::-moz-range-thumb {
border-radius: 20px;
width: 25px;
height: 25px;
background: rgb(200, 255, 0);
border: 6px solid rgb(0, 105, 44);
cursor: pointer;
}
</style>
</head>
<body>
<h1>Custom Range Slider Example</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" />
</div>
<h2 class="sliderVal">T</h2>
<script>
var slider = document.querySelector(".slider");
var output = document.querySelector(".sliderVal");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>코드 상세 설명
1. HTML 구조
슬라이더는 <input type="range"> 요소로 구성됩니다. min과 max 속성으로 값의 범위(1~100)를 지정하고, value 속성으로 초기값(50)을 설정합니다.
2. CSS 스타일링
- -webkit-appearance: none; — 브라우저의 기본 슬라이더 스타일을 제거하여 완전히 새로운 디자인을 적용할 수 있게 합니다.
- background와 border-radius — 슬라이더 트랙에 보라색(#e478ff) 배경과 둥근 모서리를 적용합니다.
- :hover 효과 — 마우스를 올리면 투명도(opacity)가 0.7에서 1로 변하며, transition 덕분에 부드럽게 전환됩니다.
- ::-webkit-slider-thumb — Chrome, Safari 등 WebKit 계열 브라우저에서 드래그 핸들(thumb)의 크기, 색상, 테두리를 지정합니다.
- ::-moz-range-thumb — Firefox에서 동일하게 핸들을 커스터마이징하기 위한 선택자입니다.
3. JavaScript로 값 표시하기
querySelector로 슬라이더와 출력 영역을 가져온 뒤, oninput 이벤트 핸들러를 등록합니다. 사용자가 슬라이더를 움직일 때마다 현재 값이 <h2> 요소에 실시간으로 업데이트되어 표시됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
보라색 트랙 위에 초록색 테두리가 있는 노란 원형 핸들이 배치되어 있으며, 핸들을 드래그하면 아래 숫자가 즉시 변경됩니다. 마우스를 올리면 슬라이더가 선명해지는 효과도 확인할 수 있습니다.
마무리
이처럼 -webkit-appearance: none과 가상 요소 선택자(::-webkit-slider-thumb, ::-moz-range-thumb)를 활용하면 브라우저 호환성을 유지하면서도 자유롭게 슬라이더를 디자인할 수 있습니다. 색상, 크기, 그림자 등을 변경하여 여러분의 프로젝트에 맞게 응용해 보세요.