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

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

ไวยากรณ์ (Syntax)

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

rangeObject.min = number

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

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

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

ผลลัพธ์

Slider เริ่มต้นที่ 15 (แทนที่จะเป็น 0)

คลิก "ดูค่าต่ำสุด": แสดง "ค่าต่ำสุดของ slider นี้คือ: 15"

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

• Slider มี min="15" (ค่าเริ่มต้น max=100)
• ปุ่ม "ดูค่าต่ำสุด" เรียก minVal()
• ดึง .min property แล้วแสดงผล

หมายเหตุ: ค่า min ต้องน้อยกว่า max มิฉะนั้น slider อาจทำงานผิดปกติ ค่าเริ่มต้น min=0, max=100