HTML DOM 입력 범위 단계 속성

<시간/>

HTML DOM 입력 범위 단계 속성은 슬라이더 제어 단계 속성 값을 설정하거나 반환하는 데 사용됩니다. 슬라이더가 움직일 때마다 얼마나 움직일 것인지 지정합니다. 최대 및 최소 속성을 단계 속성과 함께 사용하여 유효한 값 범위를 정의할 수 있습니다.

구문

다음은 −

의 구문입니다.

단계 속성 설정 -

rangeObject.step=number

여기서 number는 슬라이더 컨트롤의 이동 크기를 지정합니다. 기본값은 1입니다.

예시

입력 범위 단계 속성에 대한 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeStep() {
      document.getElementById("RANGE1").step ="30" ;
      document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 범위 단계 속성

CHANGE 버튼을 클릭하면 -

HTML DOM 입력 범위 단계 속성

위의 예에서 -

type="range", id="RANGE1", name="VOL"인 형식 안에 포함된 입력 필드를 만들었습니다. 단계 속성 값은 기본적으로 1 −

로 설정됩니다.

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

그런 다음 사용자가 클릭할 때 changeStep() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.

<button type="button" onclick="changeStep()">CHANGE</button>

changeStep() 메서드는 getElementById() 메서드를 사용하여 ID "RANGE1"을 전달하여 유형 범위가 있는 입력 필드를 가져옵니다. 요소를 가져온 후 단계 속성을 30으로 설정합니다. 이렇게 하면 슬라이더가 한 번의 이동으로 이동하는 정도가 증가합니다. 최소값은 0이고 최대값은 기본적으로 100이므로 슬라이더는 이제 세 곳으로만 이동합니다 -

function changeStep() {
   document.getElementById("RANGE1").step ="30" ;
   document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}