HTML DOM Input Range 객체 – 속성, 메서드, 실전 예제 총정리

HTML DOM Input Range 객체는 type 속성이 "range"로 지정된 <input> 요소와 연결됩니다. 슬라이더 형태의 범위 입력 컨트롤을 다루는 이 객체는 자바스크립트를 통해 동적으로 생성하거나 접근할 수 있습니다. 새로운 range 타입의 input 요소를 만들 때는 createElement() 메서드를, 이미 존재하는 요소에 접근할 때는 getElementById() 메서드를 사용합니다.

Input Range 객체의 주요 속성

Input Range 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.

번호	속성 및 설명
1	autocomplete range 컨트롤의 autocomplete 속성 값을 설정하거나 반환합니다.
2	autofocus 페이지가 로드될 때 슬라이더 컨트롤이 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다.
3	defaultValue 슬라이더 컨트롤의 기본값(default value)을 설정하거나 반환합니다.
4	disabled 슬라이더 컨트롤이 비활성화되어 있는지 여부를 설정하거나 반환합니다.
5	form 슬라이더 컨트롤을 포함하고 있는 폼(form)의 참조를 반환합니다.
6	list 슬라이더 컨트롤이 참조하는 datalist 요소의 참조를 반환합니다.
7	max 슬라이더 컨트롤의 max 속성 값(최댓값)을 설정하거나 반환합니다.
8	min 슬라이더 컨트롤의 min 속성 값(최솟값)을 설정하거나 반환합니다.
9	name 슬라이더 컨트롤의 name 속성 값을 설정하거나 반환합니다.
10	step 슬라이더 컨트롤의 step 속성 값(증감 단위)을 설정하거나 반환합니다.
11	type 슬라이더 컨트롤의 폼 요소 유형(type)을 반환합니다.
12	value 슬라이더 컨트롤의 value 속성 값(현재 값)을 설정하거나 반환합니다.

Input Range 객체의 메서드

Input Range 객체에서 제공하는 메서드는 다음과 같습니다.

번호	메서드 및 설명
1	stepDown() 지정한 숫자만큼 슬라이더 컨트롤의 값을 감소시킵니다.
2	stepUp() 지정한 숫자만큼 슬라이더 컨트롤의 값을 증가시킵니다.

예제: Input Range 객체 활용하기

다음 예제를 통해 Input Range 객체의 실제 사용 방법을 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function rangeCreate() {
        var R = document.createElement("INPUT");
        R.setAttribute("type", "range");
        document.body.appendChild(R);
    }
</script>
</head>
<body>
<h1>Input range 객체</h1>
<p>아래 버튼을 클릭하면 type이 range인 입력 필드가 생성됩니다.</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html>

실행 결과

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

HTML DOM Input Range 객체 – 속성, 메서드, 실전 예제 총정리

CREATE 버튼을 클릭하면 슬라이더가 생성됩니다.

HTML DOM Input Range 객체 – 속성, 메서드, 실전 예제 총정리

예제 코드 상세 분석

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

먼저, 사용자가 클릭하면 rangeCreate() 함수를 실행하는 CREATE 버튼을 만듭니다.

<button onclick="rangeCreate()">CREATE</button>

rangeCreate() 함수 내부에서는 document 객체의 createElement() 메서드에 "INPUT"을 매개변수로 전달하여 <input> 요소를 새로 생성합니다. 이렇게 만들어진 input 요소는 변수 R에 할당되며, 이어서 setAttribute() 메서드를 사용해 type 속성을 추가하고 그 값을 "range"로 지정합니다.

여기서 기억할 점은, setAttribute()는 해당 속성이 기존에 존재하지 않을 경우 속성을 새로 생성한 뒤 값을 할당한다는 것입니다. 마지막으로 document body에 appendChild() 메서드를 호출하여 type이 range인 input 요소를 body의 자식 노드로 추가합니다.

function rangeCreate() {
    var R = document.createElement("INPUT");
    R.setAttribute("type", "range");
    document.body.appendChild(R);
}

이처럼 HTML DOM의 Input Range 객체를 활용하면 볼륨 조절, 밝기 설정 등 다양한 범위 선택 UI를 자바스크립트만으로 동적으로 구현할 수 있습니다.