วิธาใช้ Input Type Range ใน HTML

บทนำ

ใช้ <input type="range"> สำหรับ Slider เลือกค่าในช่วง ค่าเริ่มต้น 0-100

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Range</title>
  </head>
  <body>
    <form action="" method="get">
      ระบุจุดที่การติดตั้งหยุด (0-50):<br><br>
      <input type="range" name="point" min="0" max="50"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

แอตทริบิวต์สำคัญ

การจัดสไตล์ Slider (CSS)

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

แสดงค่าปัจจุบัน (ต้องใช้ JS)

<input type="range" id="range" min="0" max="100" value="50">
<output id="value">50</output>
<script>
  document.getElementById('range').addEventListener('input', function() {
    document.getElementById('value').value = this.value;
  });
</script>