HTML DOM Input Range 값(value) 속성 완벽 정리

HTML DOM의 Input Range 값(value) 속성은 type="range"로 지정된 input 요소의 value 속성과 관련된 기능입니다. 이 속성을 활용하면 슬라이더 컨트롤의 현재 값을 가져오거나(반환), 새로운 값으로 설정할 수 있습니다. 여기서 value 속성은 초기 기본값이 될 수도 있고, 사용자가 슬라이더를 드래그하여 변경한 값이 될 수도 있습니다.

문법(Syntax)

값 속성을 설정하는 문법은 다음과 같습니다.

rangeObject.value = text;

여기서 text는 범위(range) 슬라이더 컨트롤에 지정할 값을 의미합니다.

예제(Example)

입력 범위(input range) 값 속성의 실제 동작 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>아래 버튼을 클릭하면 위 요소의 값을 가져옵니다</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("RANGE1").value;
        document.getElementById("Sample").innerHTML = "슬라이더의 현재 값은 : "+t;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Range 값(value) 속성 완벽 정리

"Get Value" 버튼을 클릭하면 아래와 같이 슬라이더의 값이 표시됩니다.

HTML DOM Input Range 값(value) 속성 완벽 정리

예제 코드 상세 분석

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

1. 범위 슬라이더 생성

먼저 form 요소 내부에 type="range", id="RANGE1", name="VOL" 속성을 가진 input 필드를 생성했습니다.

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

2. 버튼 클릭 이벤트 등록

다음으로 사용자가 클릭하면 getValue() 메서드를 실행하는 "Get Value" 버튼을 만들었습니다.

<button type="button" onclick="getValue()">Get Value</button>

3. 값 가져오기 및 화면 출력

getValue() 메서드는 getElementById() 메서드를 통해 해당 input 요소에 접근한 뒤, 그 value 속성 값을 변수 t에 할당합니다. 이후 innerHTML 속성을 사용하여 id가 "Sample"인 단락(paragraph)에 결과 값을 출력합니다.

function getValue() {
    var t = document.getElementById("RANGE1").value;
    document.getElementById("Sample").innerHTML = "슬라이더의 현재 값은 : "+t;
}

정리

HTML DOM의 Input Range 값 속성은 JavaScript만으로 슬라이더의 값을 읽어오거나 동적으로 변경할 수 있는 강력한 도구입니다. 볼륨 조절기, 필터 적용, 점수 선택 등 다양한 UI에서 폼 제출 없이 실시간으로 값을 다뤄야 할 때 유용하게 활용할 수 있습니다.