range slider란?
range slider는 흔히 우리가 슬라이더라고 많이 부르는 범위를 조절하는 바 형태의 컴포넌트입니다.
javascript에서는 <input> 태그의 type 속성을 "range"로 넣으면 만들 수 있습니다.
min에는 최소값을, max에는 최댓값을 넣을 수 있고, default값은 중간값이 들어갑니다.
동그란 핸들부분을 thumb라고 흔히 부르는데, 저 부분을 눌러서 좌우로 당기면 값이 변경되는 형태입니다.
그런데 실제로 사용하다보면 세밀한 조절보다 한 번에 수치를 조절하고 싶을 때가 있는데 그럴 때는 어떻게 하면 될까요?
예를 들어 위와 같은 형태로 좌우에 < > 버튼이 있어서 누르면 현재값에서 가까운 25의 배수로 설정이 되면 어떨까요
값이 68일때 왼쪽 버튼을 누르면 50이 되고 오른쪽 버튼을 누르면 75가 되는 식입니다.
즉 0, 25, 50, 75, 100으로 버튼을 누르면 바로 넘어가는 형태로 만들어보려고 합니다.
아래에서 테스트 해볼 수 있습니다.
const getStepValue = (type) => {
const values = [0,25,50,75,100];
const slider = document.getElementById("slider");
let value_string = slider.value;
let value = parseInt(value_string);
if (value%25 === 0) value = type === 'plus' ? Math.min(value +1,100) : Math.max(value-1,0);
const tempValue = type === 'plus' ? Math.ceil(value/25) : Math.floor(value/25);
slider.value = values[tempValue];
};
먼저 버튼을 눌렀을 때 변화하는 값을 반환하는 함수를 만들어보겠습니다.
해당 함수의 인수값으로 type을 받도록 하겠습니다.
type은 button이 숫자가 plus가 되는 버튼인지, minus가 되는 버튼인지를 구분하기 위해 받습니다.
배열을 만들어 0, 25, 50, 75, 100의 값을 넣어둡니다.
그리고 range slider의 value값을 25로 나눈 나머지 값을 type에 따라 계산해 줍니다.
계산한 값은 values의 index로 활용해서 값을 반환받습니다.
만약 25로 나눈 값의 나머지가 0이라면 어떻게 될까요?
나머지가 0이라는 얘기는 slider 값이 25의 배수라는 것을 의미합니다.
tempValue가 value를 25로 나눈 값을 plus타입이라면 올림을, minus타입이라면 내림을 한 값인데, 25의 배수라면 올림, 내림이 되지 않고 원래 index의 값 그대로 나오게 됩니다.
따라서 버튼을 아무리 눌려도 값이 변화하지 않게 됩니다.
(예를 들어 50에서 오른쪽 버튼이나 왼쪽 버튼을 눌러도 그대로 50이 됩니다)
그래서 if (value%25 === 0) value = type === 'plus' ? Math.min(value+1,100) : Math.max(value-1,0); 코드가 필요합니다.
값을 1을 더하거나 빼서 올림이나 내림이 될 수 있게 하는 것입니다.
그리고 tempValue를 인덱스로 values에서 값을 가져와 slider의 value값에 넣어줍니다.
전체 html 코드를 올리며 끝내도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행복한 알파카 - range slider 만들기</title>
<style>
.container {
display: flex;
width: 100%;
margin-top: 100px;
align-items: center;
justify-content: center;
}
.btn {
background-color: #fff;
border: 0px solid #fff;
font-size: 16px;
font-weight: 600;
color: rgb(17, 17, 59);
}
</style>
<script>
const getStepValue = (type) => {
const values = [0,25,50,75,100];
const slider = document.getElementById("slider");
let value = slider.value;
console.log("value:",value)
if (value%25 === 0) value = type === 'plus' ? Math.min(value+1,100) : Math.max(value-1,0);
const tempValue = type === 'plus' ? Math.ceil(value/25) : Math.floor(value/25);
slider.value = values[tempValue];
};
</script>
</head>
<body>
<div class="container">
<input type="button" class="btn" value="<" onclick="getStepValue('minus')"></input>
<input type="range" min="1" max="100" value="50" id="slider" />
<input type="button" class="btn" value=">" onclick="getStepValue('plus')"></input>
</div>
</body>
</html>
'IT > javascript' 카테고리의 다른 글
[javascript] 특정 시간만큼 대기시키는 함수 만들기(setTimeout(), Promise, async await) (1) | 2023.08.01 |
---|---|
[javascript] 랜덤 문자열 생성하는 방법 (0) | 2023.02.02 |
[javascript] 객체가 빈 값인지 확인하는 방법 (0) | 2023.01.27 |