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

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

ไวยากรณ์

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

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

rangeObject.max = number

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

ตัวอย่าง

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

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

ผลลัพธ์

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

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

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

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

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

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range”, id=“RANGE1” , name=“VOL” และค่าแอตทริบิวต์สูงสุดที่ตั้งไว้ที่ 75 -

<form>
VOLUME <input type="range" id="RANGE1" name="VOL" max="75">
<form>

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

<button type="button" onclick="maxVal()">GET MAX</button>

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

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