HTML DOM Input Range의 min 속성은 범위(range) 슬라이더 컨트롤의 min 특성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 슬라이더가 가질 수 있는 최솟값을 지정하는 역할을 하며, 일반적으로 max 속성과 함께 사용되어 슬라이더가 이동할 수 있는 값의 범위를 정의합니다.
구문(Syntax)
min 속성의 구문은 다음과 같습니다.
1. min 속성 값 설정하기
rangeObject.min = number
여기서 number는 슬라이더 컨트롤에 지정할 최솟값을 의미합니다.
2. min 속성 값 가져오기
rangeObject.min
매개변수 없이 호출하면 현재 설정된 최솟값이 문자열 형태로 반환됩니다.
예제(Example)
Input Range min 속성의 실제 동작 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Range min property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
</form>
<p>Get the minimum value for the above slider by clicking the below button.</p>
<button type="button" onclick="minVal()">GET MIN</button>
<p id="Sample"> </p>
<script>
function minVal() {
var R=document.getElementById("RANGE1").min;
document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET MIN 버튼을 클릭한 후의 결과:
예제 코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
1. 범위 슬라이더 생성
먼저 폼(form) 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 입력 필드를 생성하고, min 특성 값을 15로 설정했습니다.
<form> VOLUME <input type="range" id="RANGE1" name="VOL" min="15"> </form>
이렇게 하면 해당 슬라이더는 15 미만의 값으로는 이동할 수 없습니다.
2. 버튼 생성 및 이벤트 연결
다음으로 GET MIN 버튼을 만들고, 사용자가 클릭했을 때 minVal() 함수가 실행되도록 onclick 이벤트로 연결했습니다.
<button type="button" onclick="minVal()">GET MIN</button>
3. minVal() 함수의 동작 원리
minVal() 함수는 getElementById() 메서드를 사용하여 type이 range인 입력 요소에 접근하고, 해당 요소의 min 특성 값을 읽어옵니다. 반환된 값, 즉 슬라이더가 가질 수 있는 최솟값은 변수 R에 저장됩니다. 이후 innerHTML 속성을 통해 id가 “Sample”인 문단(paragraph)에 그 값을 출력합니다.
function minVal() {
var R= document.getElementById("RANGE1").min;
document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}정리
Input Range의 min 속성은 자바스크립트에서 슬라이더의 최솟값을 동적으로 확인하거나 변경할 수 있게 해주는 유용한 기능입니다. 예를 들어 사용자 설정에 따라 허용 가능한 값의 범위를 실시간으로 조정해야 하는 경우, 이 속성을 활용하면 별도의 HTML 수정 없이 간단하게 처리할 수 있습니다.