[form] BS5 - Range (레인지: 범위지정)

1. Range 기본 구문
2. Range 단계 설정
3. Range 최소/최대

Range 기본 구문

※ type="range" 속성 갖는 INPUT 요소에 .form-range 클래스 추가.

※ 기본적으로 1씩 바뀌며, (최소 0 ~ 최대 100) 중 선택 가능.

 

<form action="/action_page.php">

    <label for="hz" class="form-label">기본 range</label>

    <input type="range" class="form-range" id="hz" name="point">    

    <button type="submit" class="btn btn-primary mt-3">Submit</button>

</form>

 

Range 단계 설정

※ 기본적으로 한번에 1씩 바뀌나, step 속성 이용해 변경 가능.(예: 10)

 

<form action="/action_page.php">

    <label for="hz" class="form-label">기본 range</label>

    <input type="range" class="form-range" step="10" id="hz" name="point">    

    <button type="submit" class="btn btn-primary mt-3">Submit</button>

</form>

 

Range 최소/최대

※ 기본적으로 (최소 0, 최대 100)이나, min/max 속성 이용해 변경 가능.

 

<form action="/action_page.php">

    <label for="hz" class="form-label">기본 range</label>

    <input type="range" class="form-range" id="hz" name="point" min="0" max="1000">    

    <button type="submit" class="btn btn-primary mt-3">Submit</button>

</form>