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

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

ไวยากรณ์

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

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

rangeObject.step=number

ที่นี่ ตัวเลข ระบุขนาดการเคลื่อนไหวของตัวควบคุมตัวเลื่อน ค่าเริ่มต้นสำหรับสิ่งนี้คือ 1.

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeStep() {
      document.getElementById("RANGE1").step ="30" ;
      document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
   }
</script>
</body>
</html>

ผลลัพธ์

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

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

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

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

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

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

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

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

<button type="button" onclick="changeStep()">CHANGE</button>

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

function changeStep() {
   document.getElementById("RANGE1").step ="30" ;
   document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}