HTML DOM Input Range stepDown() method

ขั้นตอน HTML DOM Input Range stepDown() ใช้สำหรับลดค่าควบคุมตัวเลื่อนด้วยตัวเลขที่ระบุ หากเว้นว่างไว้ ค่าจะลดลง 1 หากระบุแอตทริบิวต์ของขั้นตอน วิธีการ stepdown() จะลดลงทีละหลายค่า เช่น ถ้า step=”20” แล้ว stepDown(2) จะลดลง 20*2=40

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด Range stepDown() -

rangeObject.stepDown(number)

ในที่นี้ ตัวเลขเป็นพารามิเตอร์บังคับสำหรับการระบุค่าการลดการควบคุมตัวเลื่อน หากเว้นว่างไว้จะลดลง 1

ตัวอย่าง

เรามาดูตัวอย่างของ range stepDown() method −

<!DOCTYPE html>
<html>
<body>
<h1>Input range stepDown() method</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Decrement the slider control value by clicking the below button</p>
<button type="button" onclick="stepDecrement()">DECREMENT</button>
<p id="Sample"></p>
<script>
   function stepDecrement() {
      document.getElementById("RANGE1").stepDown(10);
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM Input Range stepDown() method

เมื่อคลิกที่ปุ่ม DECREMENT -

HTML DOM Input Range stepDown() method

ในตัวอย่างข้างต้น −

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range, id=“RANGE1” ,name=“VOL” −

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

เราได้สร้างปุ่ม DECREMENT ซึ่งจะรันเมธอด stepDecrement() เมื่อผู้ใช้คลิก -

<button type="button" onclick="stepDecrement()">DECREMENT</button>

เมธอด stepDecrement() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีช่วงประเภทโดยส่ง id “RANGE1” ไปที่มันและเรียกเมธอด stepDown() กับ 10 ที่ให้มาเป็นค่าที่ลดลง สิ่งนี้จะลดตัวเลื่อนลง 10 -

function stepDecrement() {
   document.getElementById("RANGE1").stepDown(10);
}