ออบเจ็กต์ HTML DOM Input Range

ออบเจ็กต์ HTML DOM Input Range เกี่ยวข้องกับ <input type="range"> สามารถสร้างและเข้าถึงได้ด้วย createElement() และ getElementById()

คุณสมบัติ (Properties)

#	คุณสมบัติและคำอธิบาย
1	autocomplete — autocomplete attribute ของ slider
2	autofocus — โฟกัสอัตโนมัติเมื่อโหลดหน้า
3	defaultValue — ค่าเริ่มต้นของ slider
4	disabled — สถานะ disabled
5	form — อ้างอิงฟอร์มที่บรรจุ slider
6	list — อ้างอิง datalist ที่เชื่อมโยง (สำหรับ tick marks)
7	max — ค่าสูงสุด (max attribute)
8	min — ค่าต่ำสุด (min attribute)
9	name — name attribute
10	step — ขนาดขั้นตอน (step attribute)
11	type — (อ่านอย่างเดียว) คืนค่า "range"
12	value — ค่าปัจจุบันของ slider

เมธอด (Methods)

#	เมธอดและคำอธิบาย
1	stepDown() — ลดค่า slider ตามจำนวนที่กำหนด
2	stepUp() — เพิ่มค่า slider ตามจำนวนที่กำหนด

ตัวอย่าง: สร้าง Range Slider แบบไดนามิก

<!DOCTYPE html>
<html>
<head>
<script>
  function rangeCreate() {
    var R = document.createElement("INPUT");
    R.setAttribute("type", "range");
    document.body.appendChild(R);
  }
</script>
</head>
<body>
<h1>ออบเจ็กต์ Input Range</h1>
<p>คลิกปุ่มด้านล่างเพื่อสร้าง range slider</p>
<button onclick="rangeCreate()">สร้าง</button>
<br><br>
ระดับเสียง: 
</body>
</html>

ผลลัพธ์

ก่อนคลิก: ไม่มี slider

หลังคลิก "สร้าง": Range slider ใหม่ปรากฏขึ้น ใช้งานได้ทันที

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

ปุ่ม "สร้าง" เรียก rangeCreate()
createElement("INPUT") สร้าง input element
setAttribute("type", "range") กำหนด type
appendChild() เพิ่มเข้า body

หมายเหตุ: ตัวอย่างต้นฉบับมีชื่อฟังก์ชัน createPASS ผิด — ได้แก้ไขเป็น rangeCreate ในตัวอย่างด้านบนแล้ว

คุณสมบัติเพิ่มเติม: คุณสมบัติ list (หมายเลข 6) เชื่อมโยงกับ <datalist> เพื่อแสดง tick marks/ค่าที่แนะนำบน slider track