คุณสมบัติ HTML DOM Input Range step

คุณสมบัติ step ของ input type="range" ใช้ตั้งค่าหรือดึงค่าแอตทริบิวต์ step ซึ่งระบุ ขนาดขั้นตอนการเคลื่อนที่ของ slider ทุกครั้งที่ลากหรือใช้ stepUp/stepDown การรวม min, max, และ step จะกำหนดช่วงค่าที่ถูกต้อง (valid values) ที่ slider สามารถหยุดได้

ไวยากรณ์ (Syntax)

การตั้งค่า step:

rangeObject.step = number

number คือขนาดขั้นตอนการเคลื่อนที่ (ค่าเริ่มต้น 1)

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ step ของ Input Range</h1>
<form>
  ระดับเสียง <input type="range" id="RANGE1" name="VOL">
</form>
<p>คลิกปุ่มเพื่อเปลี่ยน step เป็น 30</p>
<button type="button" onclick="changeStep()">เปลี่ยน Step</button>
<p id="Sample"></p>
<script>
  function changeStep() {
    document.getElementById("RANGE1").step = "30";
    document.getElementById("Sample").innerHTML = "ค่า step attribute ตอนนี้คือ 30";
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Slider step = 1 (ค่าเริ่มต้น) — ลากได้ทุกค่า 0-100

หลังคลิก "เปลี่ยน Step": step = 30 — Slider จะหยุดได้เฉพาะ 0, 30, 60, 90 (เพราะ min=0, max=100)

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

• Slider: type="range", id="RANGE1", name="VOL" (step เริ่มต้น = 1)
• ปุ่ม "เปลี่ยน Step" เรียก changeStep()
• ตั้งค่า .step = "30" ทำให้ slider กระโดดทีละ 30

ผลลัพธ์ทาง UI: Thumb ของ slider จะ "แฮนด์" (snap) ไปยังตำแหน่งที่หาร step ลงตัวเท่านั้น ทำให้เลือกค่าได้แม่นยำและรวดเร็ว

การใช้งานร่วมกับ stepUp/stepDown: หาก step=30 แล้วเรียก stepUp(1) จะเพิ่ม 30, stepUp(2) จะเพิ่ม 60