HTML DOM Input Range disabled 속성 – 범위 슬라이더 비활성화 방법

HTML DOM의 Input Range disabled 속성은 범위 슬라이더(range slider)를 비활성화할지 여부를 설정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성은 불리언(Boolean) 값을 가지며, true는 슬라이더를 비활성화하고, false는 활성화 상태를 유지함을 의미합니다. 기본값은 false로 설정되어 있으며, 비활성화된 요소는 화면에서 회색으로 표시되어 클릭이나 조작이 불가능합니다.

구문(Syntax)

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

rangeObject.disabled = true|false;

true는 범위 슬라이더를 비활성화하고, false는 비활성화하지 않음을 의미합니다. 아무 값도 지정하지 않으면 기본값인 false가 적용됩니다.

예제(Example)

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

<!DOCTYPE html>
<html>
<body>
<h1>Input range disabled Property</h1>
<form>
<input type="range" id="RANGE1" name="VOL">
</form>
<p>Disable the above range slider by clicking on the DISABLE button</p>
<button type="button" onclick="disableRange()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disableRange() {
      document.getElementById("RANGE1").disabled=true;
      document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
   }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Range disabled 속성 – 범위 슬라이더 비활성화 방법

DISABLE 버튼을 클릭하면 더 이상 슬라이더를 움직일 수 없습니다.

HTML DOM Input Range disabled 속성 – 범위 슬라이더 비활성화 방법

코드 설명

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

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

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

그다음, 사용자가 클릭하면 disableRange() 메서드를 실행하는 DISABLE 버튼을 만들었습니다.

<button type=”button” onclick="disableRange()">DISABLE</button>

disableRange() 메서드는 getElementById() 메서드를 통해 type이 range인 입력 요소에 접근한 뒤, 해당 요소의 disabled 속성을 true로 설정합니다. 이렇게 하면 슬라이더가 고정되어 사용자가 더 이상 조작할 수 없게 되며, 동시에 결과 메시지가 화면에 표시됩니다.

function disableRange() {
   document.getElementById("RANGE1").disabled=true;
   document.getElementById("Sample").innerHTML = "The range slider is now disabled" ;
}

핵심 정리

disabled 속성은 범위 슬라이더의 비활성화 여부를 제어하는 불리언 속성입니다.
true로 설정하면 슬라이더가 회색으로 표시되고 마우스나 키보드로 조작할 수 없습니다.
기본값은 false이며, JavaScript를 통해 언제든지 동적으로 변경할 수 있습니다.
사용자 입력을 일시적으로 막아야 하는 상황(예: 처리 중 상태 표시)에서 유용하게 활용됩니다.