HTML DOM Input Range stepDown() 메서드 – 슬라이더 값을 감소시키는 방법

HTML DOM Input Range stepDown() 메서드란?

HTML DOM의 Input Range stepDown() 메서드는 슬라이더(range) 컨트롤의 값을 지정한 숫자만큼 감소시키는 기능을 합니다. 인자를 전달하지 않으면 기본적으로 값이 1씩 감소하며, input 요소에 step 속성이 설정되어 있다면 해당 단위의 배수만큼 감소합니다.

예를 들어 step="20"으로 설정된 경우, stepDown(2)를 호출하면 20 × 2 = 40만큼 값이 줄어듭니다.

구문(Syntax)

Range 객체에서 stepDown() 메서드를 사용하는 기본 구문은 다음과 같습니다.

rangeObject.stepDown(number)

number 매개변수는 슬라이더 값을 얼마나 감소시킬지 지정합니다. 이 값을 생략하면 기본값인 1만큼 감소합니다.

예제(Example)

다음은 stepDown() 메서드를 활용해 슬라이더 값을 감소시키는 실제 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>아래 버튼을 클릭하면 슬라이더 값이 감소합니다</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
    function stepDecrement() {
      document.getElementById("RANGE1").stepDown(10);
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Range stepDown() 메서드 – 슬라이더 값을 감소시키는 방법

DECREMENT 버튼을 클릭하면 슬라이더 값이 10만큼 줄어든 것을 확인할 수 있습니다.

HTML DOM Input Range stepDown() 메서드 – 슬라이더 값을 감소시키는 방법

코드 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 범위 입력 필드 생성

먼저 폼 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 입력 필드를 생성했습니다.

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>

2. 버튼 생성 및 이벤트 연결

사용자가 클릭하면 stepDecrement() 함수가 실행되도록 DECREMENT 버튼을 만들었습니다.

<button type="button" onclick="stepDecrement()">DECREMENT</button>

3. stepDown() 메서드 호출

stepDecrement() 함수는 getElementById() 메서드에 id 값 "RANGE1"을 전달하여 해당 range 입력 필드를 가져온 뒤, 감소량으로 10을 지정하여 stepDown() 메서드를 호출합니다. 그 결과 슬라이더 값이 10만큼 감소합니다.

function stepDecrement() {
    document.getElementById("RANGE1").stepDown(10);
}