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

คุณสมบัติ value ของ input type="range" เกี่ยวข้องกับแอตทริบิวต์ value ใช้สำหรับ ดึงค่าหรือตั้งค่า ค่าปัจจุบันของ slider — อาจเป็นค่าเริ่มต้นหรือค่าที่ผู้ใช้ลาก slider ไปแล้ว

ไวยากรณ์ (Syntax)

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

rangeObject.value = text;

text คือค่าที่ต้องการกำหนดให้ slider (จะถูกแปลงเป็นตัวเลข)

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ value ของ Input Range</h1>
<form>
  ระดับเสียง <input type="range" id="RANGE1" name="VOL">
</form>
<p>คลิกปุ่มเพื่อดูค่าปัจจุบันของ slider</p>
<button onclick="getValue()">ดูค่า</button>
<p id="Sample"></p>
<script>
  function getValue() {
    var t = document.getElementById("RANGE1").value;
    document.getElementById("Sample").innerHTML = "ค่าของ slider คือ: " + t;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Slider อยู่ตำแหน่งเริ่มต้น (ค่าเริ่มต้น 50 หากไม่ระบุ)

คลิก "ดูค่า": แสดงค่าปัจจุบันของ slider (เช่น "ค่าของ slider คือ: 50")

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

• Slider: type="range", id="RANGE1", name="VOL" (ไม่มี min/max/value — ใช้ค่าเริ่มต้น min=0, max=100, value=50)
• ปุ่ม "ดูค่า" เรียก getValue()
• ดึง .value property (คืนค่า string) แล้วแสดง

การใช้งานจริง: มักใช้ร่วมกับ event oninput หรือ onchange เพื่ออัปเดต UI แบบ real-time เมื่อผู้ใช้ลาก slider

// ตัวอย่าง real-time update
document.getElementById("RANGE1").oninput = function() {
  document.getElementById("display").textContent = this.value;
};

หมายเหตุ: ตัวอย่างต้นฉบับมีข้อผิดพลาดในคำอธิบาย (อ้างอิง "radio button" และ PASS1) — ได้แก้ไขในคำอธิบายด้านบนแล้ว