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

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

ไวยากรณ์ (Syntax)

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

rangeObject.max = number

number คือค่าสูงสุดของ slider

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

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

ผลลัพธ์

Slider แสดงค่าสูงสุดที่ 75

คลิก "ดูค่าสูงสุด": แสดงข้อความ "ค่าสูงสุดของ slider นี้คือ: 75"

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

• Slider มี max="75" (ค่าเริ่มต้น min=0)
• ปุ่ม "ดูค่าสูงสุด" เรียก maxVal()
• ฟังก์ชันดึง .max property แล้วแสดงผล

หมายเหตุ: ค่า max ต้องมากกว่า min มิฉะนั้น slider อาจทำงานไม่ถูกต้อง ค่าเริ่มต้นคือ max=100, min=0, step=1