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

คุณสมบัติค่าช่วงอินพุต HTML DOM เชื่อมโยงกับองค์ประกอบอินพุตที่มีประเภท =” ช่วง” และแอตทริบิวต์ค่า มันถูกใช้เพื่อคืนค่าของแอตทริบิวต์ค่าควบคุมตัวเลื่อนหรือเพื่อตั้งค่า แอตทริบิวต์ค่าอาจเป็นค่าเริ่มต้นหรือค่าที่ตั้งไว้โดยการลากตัวเลื่อน

ไวยากรณ์

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

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

rangeObject.value = text;

ในที่นี้ใช้ข้อความเพื่อระบุค่าสำหรับตัวควบคุมแถบเลื่อนช่วง

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
   function getValue() {
      var t = document.getElementById("RANGE1").value;
      document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
   }
</script>
</body>
</html>

ผลลัพธ์

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

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

เมื่อคลิกปุ่ม "รับค่า" -

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

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

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

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

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

<button type="button" onclick="getValue()">Get Value</button>

เมธอด getValue() รับองค์ประกอบอินพุตโดยใช้เมธอด getElementById() และกำหนดค่าแอตทริบิวต์ "value" ให้กับตัวแปร t ตัวแปรนี้จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -

function getValue() {
   var t = document.getElementById(“RANGE1").value;
   document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}