안녕하세요. 이번 시간에는 두 개의 range slider로 최소/최대 값을 지정하는 방법을 구현하려 합니다. 쇼핑몰과 같은 사이트에서는 상품들을 조회할 때 최소/최대 가격을 slide bar를 활용해서 범위를 지정하는 경우가 많은데요. <input type = "range" > 태그와 약간의 자바스크립트 코드를 통해 간단하게 구현이 가능합니다.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script defer="defer" src = "./index.js"></script>
</head>
<body>
<!-- 최소 range (예제에서는 0~50으로 값의 범위 설정) -->
<div>
<input type="range" min="0" max="50" value="0" id="slider-1" oninput="slideMin()">
<span id = "min_text">최소</span>
</div>
<!-- 최대 range -->
<div>
<input type="range" min="0" max="50" value="50" id="slider-2" oninput="slideMax()">
<span id = "max_text">최대</span>
</div>
<!-- 최솟값 표기 -->
<span id="range1">0</span>
<!-- 최댓값 표기 -->
<span id="range2">50</span>
</body>
</html>index.js
const sliderOne = document.getElementById("slider-1"); // 최솟값 range slider
const sliderTwo = document.getElementById("slider-2"); // 최댓값 range slider
const displayValOne = document.getElementById("range1"); // 최솟값 표시되는 곳
const displayValTwo = document.getElementById("range2"); // 최댓값 표시되는 곳
const minGap = 5; // 최솟값과 최댓값의 간격을 최대한으로 좁혔을 때의 limit (여기서는 5로 설정)
// 최솟값 range slider 함수
function slideMin(){
// 최댓값 - 최솟값이 minGap(=5) 이하일 경우 최솟값의 value는 최댓값 - minGap
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderOne.value = parseInt(sliderTwo.value) - minGap;
}
// slider가 움직일 때 마다 실시간으로 최솟값 표시
displayValOne.textContent = sliderOne.value;
}
// 최댓값 range slider 함수
function slideMax(){
// 최댓값 - 최솟값이 minGap(=5) 이하일 경우 최댓값의 value는 최솟값 + minGap
if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
sliderTwo.value = parseInt(sliderOne.value) + minGap;
}
// slider가 움직일 때 마다 실시간으로 최댓값 표시
displayValTwo.textContent = sliderTwo.value;
}
결과영상입니다. 이를 바탕으로 CSS 커스텀을 하거나 실시간으로 변경되는 최소/최댓값에 따라 데이터들을 불러오는 형태로 응용이 가능합니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 내 화면 녹화 및 다운로드하기 (0) | 2023.05.04 |
|---|---|
| [javascript] Table의 Row요소 drag&drop (0) | 2023.04.25 |
| [ javascript ] EJS 사용해서 서버가 보낸 값 출력하기 (0) | 2023.04.14 |
| [JavaScript]i18next을 활용한 언어 변환 처리 (0) | 2023.04.08 |
| [JavaScript] 입력한 내용을 텍스트 파일에 저장하기 (0) | 2023.04.07 |
