การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Range

ใน Bootstrap 5 ได้มีการเพิ่มฟีเจอร์ Range หรือ range input ที่สามารถใช้ในการรับค่าตัวเลขที่สามารถเลื่อนเลือกค่าได้จากขอบเขตที่กำหนด ตัวอย่างการใช้งาน range นี้สามารถนำไปประยุกต์ใช้ในหลายรูปแบบ เช่น การปรับระดับเสียง การปรับระดับความสว่าง หรือการเลือกช่วงของตัวเลข เป็นต้น

การสร้าง Range Input เบื้องต้น

ตัวอย่างการสร้าง range input พื้นฐานที่ใช้ใน Bootstrap 5 มีลักษณะดังนี้

HTML
<form>
  <label for="customRange1" class="form-label">Example Range</label>
  <input type="range" class="form-range" id="customRange1">
</form>

ในตัวอย่างข้างต้น เราจะใช้ class="form-range" เพื่อกำหนดให้ input มีลักษณะเป็นแถบเลื่อน (slider) โดยสามารถใช้งานได้ทันทีหลังจากเรียกใช้งาน Bootstrap

กำหนดค่าต่ำสุด (min), ค่าสูงสุด (max), และค่าช่วง (step)

นอกจากการสร้าง range แบบพื้นฐานแล้ว เรายังสามารถกำหนดค่าต่ำสุด (min), ค่าสูงสุด (max), และค่าช่วง (step) ที่เป็นระยะที่ต้องการได้

HTML
<form>
  <label for="customRange2" class="form-label">Range with Min, Max, and Step</label>
  <input type="range" class="form-range" min="0" max="100" step="10" id="customRange2">
</form>

ในตัวอย่างนี้ เรากำหนดค่าเริ่มต้นของแถบเลื่อนเป็น 0 (min="0"), ค่าสูงสุดที่ 100 (max="100") และค่าก้าวคือ 10 (step="10") ซึ่งหมายความว่าผู้ใช้งานสามารถเลื่อนค่าได้ทีละ 10 หน่วย

การแสดงผลค่าที่เลือกได้

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

HTML
<form>
  <label for="customRange3" class="form-label">Range with Display Value</label>
  <input type="range" class="form-range" min="0" max="100" step="5" id="customRange3" oninput="updateValue(this.value)">
  <span id="rangeValue">50</span>
</form>

<script>
  function updateValue(val) {
    document.getElementById('rangeValue').textContent = val;
  }
</script>

ในตัวอย่างนี้ เมื่อผู้ใช้งานเลื่อนแถบเลือก ค่าที่เลือกจะถูกแสดงผลใน span ที่มี id เป็น rangeValue ซึ่งช่วยให้ผู้ใช้เห็นค่าที่เลือกได้ทันที

การปิดการใช้งาน (Disabled)

ถ้าต้องการให้ range ไม่สามารถใช้งานได้ เราสามารถเพิ่ม attribute disabled เข้าไป ดังตัวอย่างนี้

HTML
<form>
  <label for="customRangeDisabled" class="form-label">Disabled Range</label>
  <input type="range" class="form-range" id="customRangeDisabled" disabled>
</form>

ในกรณีนี้ range จะไม่สามารถเลื่อนหรือปรับค่าได้

การใช้งาน Range แบบหลายค่า (Multiple Ranges)

หากเราต้องการสร้าง range หลายตัวในแบบฟอร์มเดียวกัน สามารถทำได้ง่ายๆ ด้วยการเพิ่ม input type="range" หลายตัว ดังนี้

HTML
<form>
  <label for="customRange4" class="form-label">First Range</label>
  <input type="range" class="form-range" id="customRange4">
  
  <label for="customRange5" class="form-label mt-3">Second Range</label>
  <input type="range" class="form-range" id="customRange5">
</form>

ในกรณีนี้ มีการเพิ่ม range สองตัวในฟอร์มเดียวกัน ซึ่งสามารถใช้ในกรณีที่ต้องการให้ผู้ใช้เลือกค่าหลายช่วง เช่น การเลือกช่วงอายุ และช่วงรายได้ เป็นต้น

การใช้งานร่วมกับการจัดรูปแบบด้วย Grid และ Label

เราสามารถจัดรูปแบบ range ร่วมกับการใช้ grid เพื่อทำให้หน้าเว็บดูสวยงามและเป็นระเบียบ ดังตัวอย่าง

HTML
<form>
  <div class="row">
    <div class="col-6">
      <label for="customRange6" class="form-label">Left Range</label>
      <input type="range" class="form-range" id="customRange6">
    </div>
    <div class="col-6">
      <label for="customRange7" class="form-label">Right Range</label>
      <input type="range" class="form-range" id="customRange7">
    </div>
  </div>
</form>

ในตัวอย่างนี้ range ถูกวางใน col-6 ซึ่งทำให้แถบเลื่อนถูกแบ่งอยู่ในคอลัมน์ซ้ายและขวาของหน้าเว็บ ช่วยเพิ่มความเรียบร้อยในการจัดวาง

สรุป

การใช้งาน range input ใน Bootstrap 5 เป็นเครื่องมือที่ง่ายและมีความยืดหยุ่นในการปรับใช้ สามารถนำไปประยุกต์ใช้ได้ในหลายๆ รูปแบบ ไม่ว่าจะเป็นการกำหนดขอบเขตตัวเลข การแสดงผลค่าแบบเรียลไทม์ หรือการจัดรูปแบบเพื่อให้หน้าเว็บดูสวยงามและเป็นระเบียบ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ