Slider
범위 값을 선택하는 Slider 컴포넌트입니다. 네이티브 input type="range"를 기반으로 하며, 모바일에서는 slider_stepper로 증감 버튼을 제공해 드래그와 동일하게 step 단위로 값을 조절할 수 있습니다.
유형
접근 가능한 이름 지정 방식별 예시입니다. 보이는 레이블이 있으면 `label for` 또는 `aria-labelledby`를, 레이블 없이 아이콘·단독 UI만 있으면 `aria-label`을 사용합니다. 보조 설명은 `aria-describedby`, 스크린 리더용 값 표현은 `aria-valuetext`와 `output`을 조합합니다.
기본
slider 래퍼 안에 slider_input을 배치합니다. min · max · value로 범위와 초기값을 지정합니다.
레이블 · 값 표시
slider_header에 slider_label과 output.slider_value를 함께 사용합니다. output의 for 속성은 대응하는 input id와 연결합니다.
크기
slider_sm · slider(기본) · slider_lg로 트랙·썸·텍스트 크기를 조절합니다.
너비
기본은 부모 100%입니다. slider_fit으로 --slider-max-width(320px)까지 제한하고, slider_block으로 전체 너비를 사용합니다.
간격 · 눈금
step으로 증감 단위를 지정합니다. slider_ticks로 눈금 레이블을 표시할 수 있습니다.
스텝 버튼
모바일(768px 이하)에서 range 드래그가 어려운 경우 `slider_stepper`를 추가합니다. `slider_control` 안에 `slider_step-decrease` · `slider_input` · `slider_step-increase` 순으로 배치하며, 버튼 클릭 시 `step`만큼 값이 증감됩니다. 데스크톱에서도 항상 표시하려면 `slider_stepper_always`를 함께 사용합니다.
색상
color_primary(기본) · color_success · color_danger · color_warning으로 트랙·썸 색을 지정합니다.
상태
비활성·오류(is-error) 상태를 지원합니다.
폼 레이아웃
form_field · form_vertical · form_horizontal과 함께 사용합니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | number | — | 제어 값 (Vue model-value 대응) |
defaultValue | number | 50 | 비제어 초기 값 |
min | number | 0 | 최솟값 |
max | number | 100 | 최댓값 |
step | number | — | 증감 단위 |
size | 'sm' | 'md' | 'lg' | md | slider_sm · slider_lg |
disabled | boolean | false | 비활성 |
vertical | boolean | false | 세로 슬라이더 |
label | string | — | 상단 라벨 |
showValue | boolean | false | 현재 값 output 표시 |
valueSuffix | string | — | 값 뒤 단위 (%, px 등) |
hint | string | — | 하단 힌트 텍스트 |
stepper | boolean | false | ± 스텝 버튼 (slider_stepper) |
stepperAlways | boolean | false | 스텝 버튼 항상 표시 |
decreaseLabel | string | 값 줄이기 | 감소 버튼 aria-label |
increaseLabel | string | 값 늘리기 | 증가 버튼 aria-label |
className | string | — | slider 루트에 추가 클래스 |
onChange | (value: number) => void | — | 값 변경 콜백 |
ripple | boolean | true | 클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성 |
API · Children
| Children | 설명 |
|---|---|
default | 추가 콘텐츠 (눈금 등) |
API · Events
| 이벤트 | 설명 |
|---|---|
onChange | 값 변경 시 호출 (number 인자, Vue update:modelValue 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
slider | 슬라이더 루트 |
slider_sm · slider_lg · slider_vertical | 크기·방향 |
slider_stepper · slider_stepper_always | 스텝 버튼 모드 |
slider_header · slider_label · slider_value · slider_hint | 헤더·힌트 |
slider_input · slider_control · slider_step | range·스텝 버튼 |
slider_ticks · slider_tick | 눈금 (HTML 마크업) |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--slider-track-height · --slider-thumb-size | 4px · 14px | 트랙·썸 크기 (md) |
--slider-max-width | var(--input-max-width) | 최대 너비 |
--slider-step-size | 2.25rem | 스텝 버튼 크기 |