범위
범위 (Range)
일관된 크로스 브라우저 스타일링과 내장 커스터마이즈를 위해 커스텀 범위 입력을 사용해 보아요.
출처: 문서
본문
개요 (Overview)
.form-range로 커스텀 <input type="range"> 컨트롤을 만들어요. 트랙(배경)과 썸(값) 모두 브라우저에서 동일하게 보이도록 스타일링돼요. Firefox만이 썸의 왼쪽이나 오른쪽에서 트랙을 "채워" 진행 상황을 시각적으로 표시하는 것을 지원하므로, 우리는 현재 이를 지원하지 않아요.
<label for="range1" class="form-label">Example range</label>
<input type="range" class="form-range" id="range1">
비활성화 (Disabled)
입력에 disabled 불리언 속성을 추가하면 회색으로 보이는 외형을 주고, 포인터 이벤트를 제거하며, 포커스를 방지해요.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
최소값과 최대값 (Min and max)
범위 입력에는 min과 max의 암묵적 값—각각 0과 100—이 있어요. min과 max 속성으로 이 값에 새 값을 지정할 수 있어요.
<label for="range2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="range2">
단계 (Steps)
기본적으로 범위 입력은 정수 값에 "스냅"해요. 이를 변경하려면 step 값을 지정할 수 있어요. 아래 예시에서는 step="0.5"를 사용해 단계 수를 두 배로 늘려요.
<label for="range3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="range3">
출력 값 (Output value)
범위 입력의 값은 output 요소와 약간의 JavaScript로 표시할 수 있어요.
<label for="range4" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="100" value="50" id="range4">
<output for="range4" id="rangeValue" aria-hidden="true"></output>
<script>
// This is an example script, please modify as needed
const rangeInput = document.getElementById('range4');
const rangeOutput = document.getElementById('rangeValue');
// Set initial value
rangeOutput.textContent = rangeInput.value;
rangeInput.addEventListener('input', function() {
rangeOutput.textContent = this.value;
});
</script>
CSS
Sass 변수 (Sass variables)
scss/_variables.scss
$form-range-track-width: 100%;
$form-range-track-height: .5rem;
$form-range-track-cursor: pointer;
$form-range-track-bg: var(--#{$prefix}secondary-bg);
$form-range-track-border-radius: 1rem;
$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset);
$form-range-thumb-width: 1rem;
$form-range-thumb-height: $form-range-thumb-width;
$form-range-thumb-bg: $component-active-bg;
$form-range-thumb-border: 0;
$form-range-thumb-border-radius: 1rem;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color);
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;