เมธอด HTML DOM Input Range stepDown()

เมธอด stepDown() ของ input type="range" ใช้สำหรับ ลดค่า slider ลงตามจำนวนที่ระบุ หากไม่ระบุ จะลดทีละ 1 หากมีแอตทริบิวต์ step เมธอดจะลดเป็นจำนวนเท่าของ step (เช่น step="20" แล้ว stepDown(2) จะลด 40)

ไวยากรณ์ (Syntax)

rangeObject.stepDown(number)

• number — (จำเป็น) จำนวนที่ต้องการลด หากละเว้น จะลด 1

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>เมธอด stepDown() ของ Input Range</h1>
<form>
  ระดับเสียง <input type="range" id="RANGE1" name="VOL">
</form>
<p>คลิกปุ่มเพื่อลดค่า slider 10 หน่วย</p>
<button type="button" onclick="stepDecrement()">ลดลง</button>
<p id="Sample"></p>
<script>
  function stepDecrement() {
    document.getElementById("RANGE1").stepDown(10);
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Slider อยู่ตำแหน่งเริ่มต้น (50)

คลิก "ลดลง": Slider เคลื่อนที่ไปซ้าย 10 หน่วย (กลายเป็น 40)

คำอธิบายโค้ด

• Slider: type="range", id="RANGE1", name="VOL"
• ปุ่ม "ลดลง" เรียก stepDecrement()
• stepDown(10) ลดค่า slider ลง 10 หน่วย (หรือ 10 × step หากมี step attribute)

คู่กับเมธอด: stepUp() — เพิ่มค่า slider ขึ้น

การใช้งานจริง: สร้าง UI ควบคุม slider แบบครบถ้วน (ปุ่ม + และ -) ให้ผู้ใช้ปรับค่าได้แม่นยำกว่าการลาก