สร้างแถบเลื่อน (Slider) แบบง่าย

สวัสดีครับนักพัฒนาทุกท่าน! ยินดีต้อนรับสู่บทความที่ 4 ของซีรีส์การสร้าง UI Components พื้นฐานของเรา ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้วิธีสร้างช่องกรอกข้อมูล (Text Input) สำหรับ "ชื่อผู้ใช้งาน" และทำความเข้าใจถึงความสำคัญขององค์ประกอบพื้นฐานในการเก็บข้อมูลจากผู้ใช้

ในบทความนี้ เราจะก้าวไปอีกขั้นด้วยการสร้าง UI Component ที่น่าสนใจและมีประโยชน์ไม่แพ้กัน นั่นคือ แถบเลื่อน (Slider) ซึ่งช่วยให้ผู้ใช้สามารถปรับค่าในช่วงที่กำหนดได้อย่างง่ายดายและเป็นธรรมชาติ

สร้างแถบเลื่อน (Slider) แบบง่าย

แถบเลื่อนเป็นส่วนประกอบ UI ที่เราพบเห็นได้บ่อยครั้ง ไม่ว่าจะเป็นการปรับระดับเสียง ปรับความสว่างของหน้าจอ เลือกช่วงราคา หรือแม้แต่ให้คะแนนความพึงพอใจ การใช้แถบเลื่อนช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ใช้งานง่ายและเห็นภาพการเปลี่ยนแปลงของค่าได้ทันทีเมื่อเทียบกับการพิมพ์ตัวเลขลงไปตรงๆ

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีสร้างแถบเลื่อนแบบง่ายๆ ด้วยการผสมผสานพลังของ HTML, CSS และ JavaScript เพื่อให้แถบเลื่อนของเราไม่เพียงแค่ทำงานได้ แต่ยังมีหน้าตาที่สวยงามและตอบสนองต่อการใช้งานอีกด้วย

สิ่งที่เราจะเรียนรู้ในบทความนี้:

การใช้แท็ก <input type="range"> ใน HTML เพื่อสร้างแถบเลื่อนพื้นฐาน
การกำหนดสไตล์ให้กับแถบเลื่อนด้วย CSS ให้ดูน่าใช้งานและเข้ากับธีมของเว็บไซต์
การใช้ JavaScript เพื่ออ่านค่าจากแถบเลื่อนและนำไปแสดงผลหรือประมวลผลต่อ

1. ทำความรู้จักกับ `<input type="range">`: หัวใจของแถบเลื่อน

HTML มีแท็ก <input> ประเภทหนึ่งที่ออกแบบมาโดยเฉพาะสำหรับการสร้างแถบเลื่อน นั่นคือ <input type="range"> ซึ่งเป็นวิธีที่ง่ายที่สุดในการเริ่มต้นสร้างแถบเลื่อน

ลองนึกภาพว่าเราต้องการให้ผู้ใช้เลือกค่าตัวเลขในช่วงใดช่วงหนึ่ง เช่น 0 ถึง 100 แทนที่จะให้ผู้ใช้พิมพ์ตัวเลขลงในช่องว่าง ซึ่งอาจจะเกิดข้อผิดพลาดในการกรอกข้อมูล หรือไม่รู้ว่าควรกรอกค่าในช่วงใด การใช้ <input type="range"> จะช่วยแก้ปัญหานี้ได้เป็นอย่างดี

คุณสมบัติ (Attributes) ที่สำคัญของ `<input type="range">`:

min: กำหนดค่าน้อยที่สุดที่แถบเลื่อนสามารถเลือกได้ (ค่าเริ่มต้นคือ 0)
```
<input type="range" min="0">
```
max: กำหนดค่ามากที่สุดที่แถบเลื่อนสามารถเลือกได้ (ค่าเริ่มต้นคือ 100)
```
<input type="range" max="100">
```
value: กำหนดค่าเริ่มต้นของแถบเลื่อนเมื่อหน้าเว็บโหลด (ค่าเริ่มต้นคือ min + (max - min) / 2 ถ้าไม่ได้ระบุ)
```
<input type="range" min="0" max="100" value="50">
```
step: กำหนดช่วงห่างของการปรับค่าในแต่ละครั้งที่ผู้ใช้เลื่อน (ค่าเริ่มต้นคือ 1)
```
<input type="range" min="0" max="100" step="10"> 
```

การเข้าใจคุณสมบัติเหล่านี้จะช่วยให้เราสามารถควบคุมพฤติกรรมของแถบเลื่อนได้อย่างแม่นยำตามความต้องการ

2. สร้างแถบเลื่อนพื้นฐานด้วย HTML

มาเริ่มต้นสร้างแถบเลื่อนสำหรับปรับระดับเสียงกัน โดยเราจะใช้ HTML เพียงไม่กี่บรรทัด

ตัวอย่าง HTML:

<!-- index.html -->
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แถบเลื่อนระดับเสียง</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h2>ปรับระดับเสียง</h2>
        <label for="volumeSlider">ระดับเสียง:</label>
        <input type="range" id="volumeSlider" min="0" max="100" value="50">
        <span id="volumeValue">50</span> <!-- ใช้สำหรับแสดงค่าปัจจุบัน -->
    </div>

    <script src="script.js"></script>
</body>
</html>

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

<label for="volumeSlider">: เป็นการเชื่อมโยงข้อความ "ระดับเสียง:" เข้ากับแถบเลื่อน volumeSlider ซึ่งเป็นสิ่งสำคัญสำหรับ การเข้าถึงของผู้พิการ (Accessibility) ทำให้โปรแกรมอ่านหน้าจอ (screen readers) สามารถเข้าใจได้ว่าส่วนควบคุมนี้มีไว้เพื่ออะไร
<input type="range" id="volumeSlider" min="0" max="100" value="50">:
- type="range": บอกเบราว์เซอร์ว่านี่คือแถบเลื่อน
- id="volumeSlider": กำหนด ID เฉพาะให้กับแถบเลื่อน เพื่อให้เราสามารถอ้างอิงถึงมันได้ง่ายๆ ด้วย CSS และ JavaScript
- min="0": กำหนดให้ค่าน้อยที่สุดคือ 0
- max="100": กำหนดให้ค่ามากที่สุดคือ 100
- value="50": กำหนดให้ค่าเริ่มต้นของแถบเลื่อนอยู่ที่ 50 เมื่อหน้าเว็บโหลด
<span id="volumeValue">50</span>: เป็นองค์ประกอบ <span> ที่เราจะใช้สำหรับแสดงค่าปัจจุบันของแถบเลื่อนด้วย JavaScript ในภายหลัง เรากำหนด ID ให้มันเพื่ออ้างอิงได้ง่าย และใส่ค่าเริ่มต้น 50 เพื่อให้สอดคล้องกับ value ของแถบเลื่อน

เมื่อคุณเปิดไฟล์ index.html ในเบราว์เซอร์ คุณจะเห็นแถบเลื่อนพื้นฐานปรากฏขึ้น แต่หน้าตาอาจจะยังไม่สวยงามเท่าที่ควร ซึ่งเป็นเรื่องปกติ เพราะสไตล์เริ่มต้นของเบราว์เซอร์มักจะเรียบง่าย และอาจแตกต่างกันไปในแต่ละเบราว์เซอร์

3. ปรับแต่งสไตล์ด้วย CSS

เพื่อให้แถบเลื่อนของเราดูดีขึ้น เราจำเป็นต้องปรับแต่งสไตล์ด้วย CSS นี่คือจุดที่ความท้าทายเล็กน้อยจะเกิดขึ้น เพราะการปรับแต่ง <input type="range"> ให้ดูเหมือนกันในทุกเบราว์เซอร์นั้นต้องอาศัยเทคนิคพิเศษบางอย่าง

<input type="range"> ประกอบด้วยสองส่วนหลักๆ ที่เราจะปรับแต่งได้:

Track (รางเลื่อน): คือส่วนที่เป็นเส้นหรือแท่งยาวๆ ที่ตัวเลื่อน (thumb) เคลื่อนที่ไปมา
Thumb (ตัวเลื่อน): คือส่วนที่เป็นวงกลมหรือสี่เหลี่ยมที่เราใช้ลากไปมา

เบราว์เซอร์แต่ละค่ายมีวิธีการเข้าถึงและปรับแต่งส่วนประกอบเหล่านี้ที่แตกต่างกัน เราจึงต้องใช้ Pseudo-elements (องค์ประกอบเสมือน) ที่เฉพาะเจาะจงสำหรับแต่ละเบราว์เซอร์

ตัวอย่าง CSS:

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
}

.container {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

h2 {
    color: #007bff;
    margin-bottom: 25px;
    font-size: 1.8em;
}

label {
    display: block;
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: bold;
}

/* สไตล์สำหรับแถบเลื่อน (input type="range") */
#volumeSlider {
    -webkit-appearance: none; /* ลบสไตล์เริ่มต้นของเบราว์เซอร์ Chrome/Safari/Edge */
    appearance: none; /* ลบสไตล์เริ่มต้นสำหรับเบราว์เซอร์อื่นๆ */
    width: 100%; /* กำหนดความกว้างเต็มพื้นที่ */
    height: 10px; /* กำหนดความสูงของรางเลื่อน */
    background: #d3d3d3; /* สีพื้นหลังของรางเลื่อน */
    outline: none; /* ลบขอบเมื่อโฟกัส */
    opacity: 0.7; /* ความทึบแสงเริ่มต้น */
    transition: opacity .2s; /* เพิ่ม transition เมื่อ hover */
    border-radius: 5px; /* ทำให้ขอบรางเลื่อนโค้งมน */
    margin-top: 10px;
    margin-bottom: 20px;
}

/* เมื่อผู้ใช้เอาเมาส์ไปวางบนแถบเลื่อน */
#volumeSlider:hover {
    opacity: 1; /* เพิ่มความทึบแสง */
}

/* สไตล์สำหรับรางเลื่อน (Track) ใน Webkit browsers (Chrome, Safari, Edge) */
#volumeSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #007bff; /* สีของรางเลื่อนเมื่อเลื่อนไปแล้ว */
    border-radius: 5px;
    box-shadow: 0px 0px 0px #000000; /* เงา (ถ้าต้องการ) */
}

/* สไตล์สำหรับตัวเลื่อน (Thumb) ใน Webkit browsers */
#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none; /* ลบสไตล์เริ่มต้น */
    appearance: none;
    width: 25px; /* ความกว้างของตัวเลื่อน */
    height: 25px; /* ความสูงของตัวเลื่อน */
    background: #ffffff; /* สีของตัวเลื่อน */
    cursor: pointer;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    border: 2px solid #007bff; /* ขอบของตัวเลื่อน */
    margin-top: -8px; /* ปรับตำแหน่งให้ตรงกลางรางเลื่อน */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* สไตล์สำหรับรางเลื่อน (Track) ใน Firefox */
#volumeSlider::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: #007bff;
    border-radius: 5px;
    box-shadow: 0px 0px 0px #000000;
}

/* สไตล์สำหรับตัวเลื่อน (Thumb) ใน Firefox */
#volumeSlider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #007bff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* สไตล์สำหรับค่าที่แสดง */
#volumeValue {
    font-size: 1.5em;
    font-weight: bold;
    color: #007bff;
    display: block; /* ทำให้ขึ้นบรรทัดใหม่ */
    margin-top: 10px;
}

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

#volumeSlider (สไตล์หลักของแถบเลื่อน):
- -webkit-appearance: none; และ appearance: none;: นี่คือคำสั่งสำคัญที่ใช้ลบสไตล์เริ่มต้นของเบราว์เซอร์ เพื่อให้เราสามารถกำหนดสไตล์เองได้ทั้งหมด
- width: 100%;, height: 10px;, background: #d3d3d3;, border-radius: 5px;: กำหนดขนาดและสีพื้นฐานของรางเลื่อนก่อนที่จะถูกปรับแต่งด้วย pseudo-elements
- opacity: 0.7; และ transition: opacity .2s;: ทำให้แถบเลื่อนดูจางลงเล็กน้อย และเมื่อผู้ใช้เอาเมาส์ไปชี้ (:hover) จะเพิ่มความทึบแสง ทำให้ดูมีการตอบสนอง
#volumeSlider::-webkit-slider-runnable-track (รางเลื่อนสำหรับ Chrome/Safari/Edge):
- ใช้สำหรับปรับแต่งส่วนรางเลื่อน
- background: #007bff;: กำหนดสีของรางเลื่อนให้เป็นสีน้ำเงินสดใส
#volumeSlider::-webkit-slider-thumb (ตัวเลื่อนสำหรับ Chrome/Safari/Edge):
- ใช้สำหรับปรับแต่งส่วนตัวเลื่อน
- width, height, border-radius: 50%;: ทำให้ตัวเลื่อนเป็นวงกลม
- background: #ffffff;, border: 2px solid #007bff;: กำหนดสีขาวและขอบสีน้ำเงิน
- margin-top: -8px;: เป็นเทคนิคที่ใช้ปรับตำแหน่งของตัวเลื่อนให้ดูเหมือนอยู่ตรงกลางของรางเลื่อน เนื่องจากตัวเลื่อนมีขนาดใหญ่กว่ารางเลื่อน
#volumeSlider::-moz-range-track และ #volumeSlider::-moz-range-thumb (สำหรับ Firefox):
- ทำหน้าที่เหมือนกับเวอร์ชัน -webkit- แต่ใช้สำหรับเบราว์เซอร์ Firefox
#volumeValue:
- กำหนดสไตล์ให้กับ <span> ที่จะใช้แสดงค่าปัจจุบันของแถบเลื่อน ให้มีขนาดใหญ่และสีชัดเจน

เมื่อคุณบันทึกไฟล์ style.css และรีเฟรชหน้าเว็บ คุณจะเห็นแถบเลื่อนที่มีหน้าตาสวยงามและเป็นไปในทิศทางเดียวกันมากขึ้นในเบราว์เซอร์ต่างๆ

ข้อผิดพลาดที่พบบ่อย (Common Pitfall): การลืมใช้ -webkit-appearance: none; หรือลืมระบุ pseudo-elements สำหรับเบราว์เซอร์ต่างๆ จะทำให้สไตล์ไม่แสดงผลตามที่ต้องการ หรือแสดงผลไม่สม่ำเสมอในแต่ละเบราว์เซอร์

4. ทำให้แถบเลื่อนมีชีวิตชีวาด้วย JavaScript

ตอนนี้เรามีแถบเลื่อนที่ดูดีแล้ว แต่ยังไม่สามารถแสดงค่าที่ผู้ใช้เลือกได้แบบเรียลไทม์ นี่คือหน้าที่ของ JavaScript

เราจะใช้ JavaScript เพื่อ:

เข้าถึงองค์ประกอบแถบเลื่อน (#volumeSlider)
เข้าถึงองค์ประกอบสำหรับแสดงค่า (#volumeValue)
ตรวจสอบการเปลี่ยนแปลงค่าของแถบเลื่อน
อัปเดตค่าที่แสดงผลให้ตรงกับค่าปัจจุบันของแถบเลื่อน

ตัวอย่าง JavaScript:

// script.js

// 1. เข้าถึงองค์ประกอบ HTML ที่ต้องการ
const volumeSlider = document.getElementById('volumeSlider');
const volumeValueDisplay = document.getElementById('volumeValue');

// 2. กำหนดค่าเริ่มต้นเมื่อหน้าเว็บโหลด
// นี่เป็นการทำให้แน่ใจว่าค่าที่แสดงผลตรงกับค่าเริ่มต้นของ slider
// (ถึงแม้เราจะใส่ค่าเริ่มต้นใน HTML แล้วก็ตาม แต่การทำแบบนี้ก็เป็น Best Practice)
volumeValueDisplay.textContent = volumeSlider.value;

// 3. เพิ่ม Event Listener เพื่อตรวจสอบการเปลี่ยนแปลงค่า
// 'input' event จะทำงานทันทีเมื่อผู้ใช้เลื่อนแถบเลื่อน
// 'change' event จะทำงานเมื่อผู้ใช้ปล่อยเมาส์หลังจากเลื่อนเสร็จ
// สำหรับ slider เรามักจะใช้ 'input' เพื่อให้เห็นการเปลี่ยนแปลงแบบเรียลไทม์
volumeSlider.addEventListener('input', function() {
    // 4. อัปเดตค่าที่แสดงผล
    volumeValueDisplay.textContent = volumeSlider.value;
});

// กรณีใช้งานเพิ่มเติม: หากต้องการให้ slider กลับไปค่าเริ่มต้นเมื่อโหลดหน้า
// window.addEventListener('DOMContentLoaded', () => {
//     volumeSlider.value = 50; // กำหนดค่าเริ่มต้น
//     volumeValueDisplay.textContent = volumeSlider.value; // อัปเดตค่าที่แสดง
// });

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

const volumeSlider = document.getElementById('volumeSlider');:
เราใช้เมธอด document.getElementById() เพื่อเข้าถึงองค์ประกอบ <input type="range"> โดยใช้ ID ที่เรากำหนดไว้ใน HTML (volumeSlider) และเก็บการอ้างอิงไว้ในตัวแปร volumeSlider
const volumeValueDisplay = document.getElementById('volumeValue');:
ทำเช่นเดียวกันกับ <span> ที่มี ID เป็น volumeValue เพื่อใช้สำหรับแสดงค่า
volumeValueDisplay.textContent = volumeSlider.value;:
เมื่อหน้าเว็บโหลดขึ้นมาครั้งแรก เราจะตั้งค่าข้อความเริ่มต้นของ volumeValueDisplay ให้ตรงกับ value ปัจจุบันของแถบเลื่อน (ซึ่งกำหนดไว้ใน HTML ว่าเป็น 50)
volumeSlider.addEventListener('input', function() { ... });:
นี่คือส่วนสำคัญที่ทำให้แถบเลื่อนมีชีวิตชีวา เราเพิ่ม Event Listener ให้กับ volumeSlider โดยเมื่อเกิดเหตุการณ์ 'input' (คือเมื่อผู้ใช้เลื่อนแถบเลื่อน) ฟังก์ชันที่เรากำหนดไว้จะถูกเรียกใช้งาน
- ความแตกต่างระหว่าง 'input' และ 'change':
  - 'input': จะทำงานทันทีและต่อเนื่องในขณะที่ผู้ใช้กำลังลากตัวเลื่อน
  - 'change': จะทำงานเมื่อผู้ใช้ปล่อยเมาส์หลังจากเลื่อนเสร็จแล้วเท่านั้น
  สำหรับแถบเลื่อน การใช้ 'input' มักจะให้ประสบการณ์ที่ดีกว่า เพราะผู้ใช้จะเห็นการเปลี่ยนแปลงค่าแบบเรียลไทม์
volumeValueDisplay.textContent = volumeSlider.value;:
ภายในฟังก์ชันของ Event Listener เราเข้าถึงค่าปัจจุบันของแถบเลื่อนด้วย volumeSlider.value และนำค่านี้ไปกำหนดให้กับคุณสมบัติ textContent ของ volumeValueDisplay เพื่อแสดงผลบนหน้าเว็บ

เมื่อคุณบันทึกไฟล์ script.js และรีเฟรชหน้าเว็บ ลองเลื่อนแถบเลื่อนดู คุณจะเห็นตัวเลขแสดงระดับเสียงเปลี่ยนแปลงไปตามการเลื่อนของคุณ!

5. กรณีใช้งานจริงและเทคนิคเพิ่มเติม

แถบเลื่อนไม่ได้มีไว้แค่ปรับระดับเสียงเท่านั้น แต่ยังสามารถนำไปประยุกต์ใช้ได้หลากหลาย

ตัวอย่างการใช้งานจริง:

ปรับความสว่างของภาพ (Image Brightness):
คุณสามารถใช้แถบเลื่อนเพื่อปรับค่า CSS filter: brightness() ของรูปภาพได้ ทำให้ผู้ใช้สามารถปรับความสว่างของรูปภาพได้ด้วยตัวเอง
```
<img id="myImage" src="my-image.jpg" style="filter: brightness(100%);">
<input type="range" id="brightnessSlider" min="0" max="200" value="100">
```
```
const brightnessSlider = document.getElementById('brightnessSlider');
const myImage = document.getElementById('myImage');

brightnessSlider.addEventListener('input', function() {
    myImage.style.filter = `brightness(${this.value}%)`;
});
```
เลือกช่วงราคา (Price Range Slider):
ในเว็บไซต์อีคอมเมิร์ซ แถบเลื่อนสามารถใช้เพื่อกำหนดช่วงราคาที่ต้องการค้นหาสินค้าได้ แม้ว่าโดยทั่วไปแล้วจะใช้แถบเลื่อนสองอันสำหรับค่า min และ max แต่แนวคิดพื้นฐานก็ยังคงเหมือนเดิม
คะแนนความพึงพอใจ (Satisfaction Rating):
ใช้แถบเลื่อนเพื่อเลือกคะแนนความพึงพอใจ เช่น 1 ถึง 5 โดยอาจจะเปลี่ยนสีหรือไอคอนเมื่อเลื่อนไปถึงค่าต่างๆ

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข:

แถบเลื่อนไม่ทำงาน หรือค่าไม่เปลี่ยนแปลง:
- ตรวจสอบ ID: ตรวจสอบให้แน่ใจว่า ID ที่ใช้ใน HTML (id="volumeSlider") ตรงกับที่ใช้ใน JavaScript (document.getElementById('volumeSlider'))
- ตรวจสอบ Event Listener: ตรวจสอบว่าคุณได้เพิ่ม .addEventListener('input', ...) อย่างถูกต้องหรือไม่
- ตรวจสอบการเชื่อมโยงไฟล์ JavaScript: ตรวจสอบว่าแท็ก <script src="script.js"></script> ถูกวางไว้ก่อนแท็กปิด </body> หรือมี defer attribute เพื่อให้แน่ใจว่า HTML โหลดเสร็จก่อน JavaScript ทำงาน
สไตล์ไม่แสดงผลตามที่ต้องการ หรือดูไม่เหมือนกันในแต่ละเบราว์เซอร์:
- ตรวจสอบ Browser Prefixes: คุณได้ใช้ pseudo-elements เช่น ::-webkit-slider-thumb และ ::-moz-range-thumb สำหรับเบราว์เซอร์หลักๆ ครบถ้วนแล้วหรือยัง?
- ลบ Default Appearance: ตรวจสอบว่าคุณได้ใช้ -webkit-appearance: none; และ appearance: none; สำหรับ <input type="range"> แล้ว
- ความถูกต้องของ CSS: ตรวจสอบว่าไม่มีข้อผิดพลาดทางไวยากรณ์ในโค้ด CSS ของคุณ
ค่าเริ่มต้นของแถบเลื่อนไม่ตรงกับที่แสดง:
- ตรวจสอบ value attribute ใน HTML ของ <input type="range">
- ตรวจสอบว่าคุณได้กำหนด volumeValueDisplay.textContent = volumeSlider.value; ใน JavaScript เมื่อหน้าเว็บโหลดครั้งแรกแล้ว

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีสร้างแถบเลื่อน (Slider) ที่ทำงานได้อย่างสมบูรณ์และมีหน้าตาที่สวยงาม โดยใช้ HTML, CSS และ JavaScript ร่วมกัน:

เราใช้ <input type="range"> ใน HTML เพื่อสร้างโครงสร้างพื้นฐานของแถบเลื่อน
เราใช้ CSS พร้อมกับ pseudo-elements ที่เฉพาะเจาะจงสำหรับแต่ละเบราว์เซอร์ (เช่น ::-webkit-slider-thumb, ::-moz-range-track) เพื่อปรับแต่งรูปลักษณ์ของรางเลื่อนและตัวเลื่อน
และสุดท้าย เราใช้ JavaScript เพื่อเข้าถึงค่าของแถบเลื่อนแบบเรียลไทม์ และนำไปแสดงผลบนหน้าเว็บด้วย Event Listener ชนิด 'input'

การสร้างแถบเลื่อนนี้เป็นอีกหนึ่งตัวอย่างที่ยอดเยี่ยมของการรวมพลังของสามเทคโนโลยีหลักในการพัฒนาเว็บ เพื่อสร้าง UI Component ที่ไม่เพียงแต่ใช้งานได้จริง แต่ยังมอบประสบการณ์ที่ดีให้กับผู้ใช้งานอีกด้วย คุณจะเห็นว่าแม้แต่ส่วนประกอบที่ดูเรียบง่าย ก็ต้องอาศัยความเข้าใจในแต่ละส่วนอย่างลึกซึ้ง

ในบทความถัดไป เราจะนำความรู้พื้นฐานเหล่านี้ไปต่อยอดสร้าง UI Component ที่ซับซ้อนขึ้นอีกเล็กน้อย นั่นคือ Modal/Popup แบบง่าย ซึ่งจะช่วยให้คุณสามารถแสดงข้อมูลเพิ่มเติมหรือเรียกใช้งานฟังก์ชันต่างๆ ได้อย่างมีประสิทธิภาพ อย่าลืมฝึกฝนและทดลองปรับแต่งแถบเลื่อนของคุณดูนะครับ แล้วพบกันใหม่ในบทเรียนหน้า!

สร้างแถบเลื่อน (Slider) แบบง่าย