คุณสมบัติขั้นต่ำของช่วงอินพุต HTML DOM

คุณสมบัติขั้นต่ำของช่วงอินพุต HTML DOM ใช้สำหรับการตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ขั้นต่ำสำหรับการควบคุมตัวเลื่อนช่วง คุณลักษณะนี้ใช้สำหรับระบุค่าต่ำสุดของตัวควบคุมตัวเลื่อน และมักใช้กับคุณสมบัติ min เพื่อสร้างช่วงของค่าระหว่างที่ตัวเลื่อนสามารถเคลื่อนที่ได้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติต่ำสุดของช่วง -

rangeObject.min = number

ในที่นี้ ตัวเลขแสดงถึงค่าการควบคุมตัวเลื่อนขั้นต่ำ

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติขั้นต่ำของช่วงอินพุต -

<!DOCTYPE html>
<html>
<body>
<h1>Range min property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
</form>
<p>Get the minimum value for the above slider by clicking the below button.</p>
<button type="button" onclick="minVal()">GET MIN</button>
<p id="Sample"> </p>
<script>
   function minVal() {
      var R=document.getElementById("RANGE1").min;
      document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

คุณสมบัติขั้นต่ำของช่วงอินพุต HTML DOM

เมื่อคลิกปุ่ม GET MIN -

คุณสมบัติขั้นต่ำของช่วงอินพุต HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มซึ่งมีประเภท=“ช่วง”, id=“RANGE1”, ชื่อ=“VOL” และตั้งค่าแอตทริบิวต์ขั้นต่ำเป็น 15 -

<form>
VOLUME <input type="range" id="RANGE1" name="VOL" min="15">
<form>

เราได้สร้างปุ่ม GET MIN ซึ่งจะรันวิธี minVal() เมื่อผู้ใช้คลิก -

<button type="button" onclick="minVal()">GET MIN</button>

วิธี minVal() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีช่วงประเภทและรับค่าแอตทริบิวต์ขั้นต่ำ ค่าที่ส่งคืนซึ่งหมายถึงค่าต่ำสุดที่ตัวเลื่อนสามารถมีได้นั้นถูกกำหนดให้กับตัวแปร R จากนั้นค่านี้จะแสดงในย่อหน้าด้วย id “ตัวอย่าง” โดยใช้คุณสมบัติ innerHTML -

function minVal() {
   var R= document.getElementById("RANGE1").min;
   document.getElementById("Sample").innerHTML = "The minimum value for this range slider is "+R;
}