[Bootstrap] Range

1. 기본 사용법

<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">

• `type="range"`: HTML 기본 range input
• `.form-range`: Bootstrap 5 슬라이더 스타일 적용

 

---

2. 최소값/최대값 설정 (`min`, `max`)

<input type="range" class="form-range" min="0" max="4">

• 기본값: `min=0`, `max=100`
• 직접 설정 가능

---

3. 간격 조정 (`step`)

<input type="range" class="form-range" step="10">

• 기본 간격: `1`
• 원하는 단위로 조정 가능 (ex. 10, 0.5 등)

---

4. 팁

• `.form-range`는 Bootstrap에서 기본 스타일만 가능
• 실시간으로 값을 보려면 JavaScript로 연동하거나 `output` 태그와 함께 사용

<label for="rangeVal">Range: <span id="rangeValue">50</span></label>
<input type="range" class="form-range" min="0" max="100" id="rangeVal">
<script>
  const range = document.getElementById("rangeVal");
  const display = document.getElementById("rangeValue");
  range.addEventListener("input", () => {
    display.textContent = range.value;
  });
</script>