HTML DOM Input Range max 속성 – 슬라이더 최댓값 설정과 조회 방법

HTML DOM의 Input Range max 속성은 범위(range) 슬라이더 컨트롤의 max 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 슬라이더가 가질 수 있는 최댓값을 나타내며, 일반적으로 min 속성과 함께 사용되어 슬라이더가 이동할 수 있는 값의 범위를 정의합니다.

문법(Syntax)

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

rangeObject.max = number

여기서 number는 슬라이더 컨트롤이 가질 수 있는 최댓값을 의미합니다.

예제

다음은 Input Range max 속성을 활용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Range max property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" max="75">
</form>
<p>Get the maximum value for the above slider by clicking the below button.</p>
<button type="button" onclick="maxVal()">GET MAX</button>
<p id="Sample"> </p>
<script>
    function maxVal() {
        var R= document.getElementById("RANGE1").max;
        document.getElementById("Sample").innerHTML = "The maximum value for this range slider is "+R;
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Input Range max 속성 – 슬라이더 최댓값 설정과 조회 방법

GET MAX 버튼을 클릭하면 다음과 같이 슬라이더의 최댓값이 표시됩니다.

HTML DOM Input Range max 속성 – 슬라이더 최댓값 설정과 조회 방법

예제 상세 설명

위 예제의 동작 방식을 단계별로 살펴보겠습니다.

먼저, 폼(form) 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 입력 필드를 생성하고, max 속성 값을 75로 지정했습니다.

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

그다음, 사용자가 클릭하면 maxVal() 함수를 실행하는 GET MAX 버튼을 만들었습니다.

<button type="button" onclick="maxVal()">GET MAX</button>

maxVal() 함수는 getElementById() 메서드를 사용해 range 타입의 입력 필드에 접근한 뒤, 해당 요소의 max 속성 값을 가져옵니다. 반환된 값(슬라이더가 가질 수 있는 최댓값)은 변수 R에 저장되며, 이후 innerHTML 속성을 통해 id가 "Sample"인 단락에 표시됩니다.

function maxVal() {
    var R= document.getElementById("RANGE1").max;
    document.getElementById("Sample").innerHTML = "The maximum value for this range slider is "+R;
}

참고 사항

max 속성을 별도로 지정하지 않으면 기본값은 100입니다. 반면 min 속성의 기본값은 0이며, max 값은 항상 min 값보다 크거나 같아야 합니다. 두 속성을 함께 활용하면 슬라이더가 표현할 수 있는 값의 범위를 자유롭게 조절할 수 있습니다.