HTML DOM의 Input Range stepUp() 메서드는 슬라이더(range) 컨트롤의 값을 지정된 숫자만큼 증가시키는 데 사용됩니다. 매개변수를 생략하면 기본값인 1씩 증가합니다. 또한 input 요소에 step 속성이 지정되어 있다면, stepUp() 메서드는 해당 step 값의 배수 단위로 값을 증가시킵니다. 예를 들어 step="20"으로 설정된 경우 stepUp(2)를 호출하면 20×2=40, 즉 40만큼 값이 증가합니다.
문법(Syntax)
Range stepUp() 메서드의 기본 문법은 다음과 같습니다.
rangeObject.stepUp(number)
여기서 number는 슬라이더 값을 얼마나 증가시킬지 지정하는 필수 매개변수입니다. 값을 생략하면 기본적으로 1씩 증가합니다.
예제
range stepUp() 메서드의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input range stepUp() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Increment the slider control value by clicking the below button</p>
<button type="button" onclick="stepIncrement()">INCREMENT</button>
<p id="Sample"></p>
<script>
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
INCREMENT 버튼을 클릭하면 슬라이더 값이 지정한 만큼 증가합니다.
코드 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저 form 요소 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 슬라이더 입력 필드를 생성했습니다.
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
그다음, 사용자가 클릭하면 stepIncrement() 함수를 실행하는 INCREMENT 버튼을 만들었습니다.
<button type="button" onclick="stepIncrement()">INCREMENT</button>
stepIncrement() 함수는 getElementById() 메서드에 id "RANGE1"을 전달하여 range 타입의 입력 필드를 가져온 뒤, 해당 요소에 대해 stepUp() 메서드를 호출하면서 증가값으로 10을 전달합니다. 그 결과 버튼을 클릭할 때마다 슬라이더 값이 10씩 증가하게 됩니다.
function stepIncrement() {
document.getElementById("RANGE1").stepUp(10);
}