แถบเลื่อน PHP ด้วย input range

แถบเลื่อน PHP ด้วย input range บทความนี้สอนการสร้าง input ชนิดแถบเลื่อนด้วย Bootstrap Framework โดยใช้คำสั่ง input type range โดยแถบเลื่อนจะเป็นแนวนอน เพื่อให้ผู้ใช้งานเลื่อนข้อมูล มีลำดับขั้นตอนดังนี้

ตัวอย่าง แถบเลื่อน PHP ด้วย input range

1. ติดตั้ง Bootstrap Framework ด้วยไฟล์ CSS ผ่าน CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

2. เขียนโค้ดสร้างแถบเลื่อน PHP ด้วย input type="range" กำหนดค่าน้อยสุด (min) ที่เลื่อนได้คือ 1 ค่ามากสุด (max) ที่เลื่อนได้คือ 100 และเลื่อนข้อมูลขึ้น - ลง (step) ได้ทีละ 1 ข้อมูล

<label class="form-label">แถบเลื่อน PHP</label>
<input type="range" class="form-range" min="1" max="100" step="1">