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

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

ไวยากรณ์ (Syntax)

rangeObject.stepUp(number)

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

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

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

ผลลัพธ์

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

คลิก "เพิ่มขึ้น": Slider เคลื่อนที่ไปขวา 10 หน่วย (กลายเป็น 60)

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

• Slider: type="range", id="RANGE1", name="VOL"
• ปุ่ม "เพิ่มขึ้น" เรียก stepIncrement()
• stepUp(10) เพิ่มค่า slider ขึ้น 10 หน่วย (หรือ 10 × step หากมี step attribute)

คู่กับเมธอด: stepDown() — ลดค่า slider ลง

การใช้งานจริง: สร้างปุ่มควบคุม slider แบบแม่นยำ (เช่น ปุ่ม + / - สำหรับปรับระดับเสียง) แทนการลาก slider โดยตรง