HTML DOM의 Input Range step 속성은 슬라이더 컨트롤의 step 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 슬라이더가 한 번에 움직이는 크기를 지정합니다. min(최솟값)과 max(최댓값) 속성을 step 속성과 함께 사용하면 유효한 값의 범위를 정의할 수 있습니다.
문법(Syntax)
step 속성을 설정하는 기본 문법은 다음과 같습니다.
rangeObject.step = number
여기서 number는 슬라이더 컨트롤이 한 번에 이동하는 크기를 의미합니다. 기본값은 1입니다.
예제(Example)
Input Range step 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>아래 버튼을 클릭하여 위 범위 컨트롤의 step 속성 값을 변경해 보세요</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeStep() {
document.getElementById("RANGE1").step = "30";
document.getElementById("Sample").innerHTML = "step 속성 값이 30으로 변경되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭한 후의 결과는 다음과 같습니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 범위 입력 필드 생성
먼저 form 태그 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 입력 필드를 생성했습니다. 이때 step 속성 값은 기본적으로 1로 설정됩니다.
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> </form>
2. CHANGE 버튼 생성
다음으로 사용자가 클릭하면 changeStep() 함수를 실행하는 CHANGE 버튼을 만들었습니다.
<button type="button" onclick="changeStep()">CHANGE</button>
3. changeStep() 함수 동작
changeStep() 함수는 getElementById() 메서드에 id "RANGE1"을 전달하여 해당 범위 입력 필드를 가져옵니다. 요소를 찾은 후에는 step 속성 값을 30으로 설정합니다. 이렇게 하면 슬라이더가 한 번에 이동하는 간격이 커집니다.
기본적으로 min 값은 0, max 값은 100이므로 step이 30으로 변경되면 슬라이더는 0, 30, 60, 90 위치로만 이동할 수 있습니다.
function changeStep() {
document.getElementById("RANGE1").step = "30";
document.getElementById("Sample").innerHTML = "step 속성 값이 30으로 변경되었습니다";
}정리
HTML DOM의 Input Range step 속성을 활용하면 슬라이더의 이동 단위를 자유롭게 조절할 수 있습니다. min, max 속성과 함께 사용하면 사용자가 선택할 수 있는 값을 세밀하게 제어할 수 있어 볼륨 조절, 평점 입력 등 다양한 UI에서 유용하게 활용됩니다.