Slider

범위 값을 선택하는 Slider 컴포넌트입니다. 네이티브 input type="range"를 기반으로 하며, 모바일에서는 slider_stepper로 증감 버튼을 제공해 드래그와 동일하게 step 단위로 값을 조절할 수 있습니다.

유형

접근 가능한 이름 지정 방식별 예시입니다. 보이는 레이블이 있으면 label for 또는 aria-labelledby를, 레이블 없이 아이콘·단독 UI만 있으면 aria-label을 사용합니다. 보조 설명은 aria-describedby, 스크린 리더용 값 표현은 aria-valuetext와 output을 조합합니다.

label + for — 기본40

레이블 없이 사용할 때는 aria-label로 접근 가능한 이름을 지정합니다.

aria-labelledby — 외부 레이블16

12~24px 사이 글자 크기

aria-describedby — 보조 설명70

0%는 최소, 100%는 최대 대비입니다. 힌트 id를 aria-describedby에 연결합니다.

aria-valuetext — 읽기 쉬운 값3

숫자 대신 aria-valuetext로 “보통”처럼 읽기 쉬운 값을 전달합니다. 시각적 output은 aria-hidden="true"로 중복 낭독을 줄일 수 있습니다.

기본

slider 래퍼 안에 slider_input을 배치합니다. min · max · default-value로 범위와 초기값을 지정합니다.

레이블 · 값 표시

slider_header에 slider_label과 output.slider_value를 함께 사용합니다. output의 for 속성은 대응하는 input id와 연결합니다.

볼륨60

밝기40

크기

slider_sm · slider(기본) · slider_lg로 트랙·썸·텍스트 크기를 조절합니다.

Small — slider_sm30

Medium — 기본50

Large — slider_lg70

너비

기본은 부모 100%입니다. slider_fit으로 --slider-max-width(320px)까지 제한하고, slider_block으로 전체 너비를 사용합니다.

slider_fit — 최대 320px45

slider_block — 전체 너비65

간격 · 눈금

step으로 증감 단위를 지정합니다. slider_ticks로 눈금 레이블을 표시할 수 있습니다.

step=1050

스텝 버튼

모바일(768px 이하)에서 range 드래그가 어려운 경우 slider_stepper를 추가합니다. slider_control 안에 slider_step-decrease · slider_input · slider_step-increase 순으로 배치하며, 버튼 클릭 시 step만큼 값이 증감됩니다. 데스크톱에서도 항상 표시하려면 slider_stepper_always를 함께 사용합니다.

볼륨 — slider_stepper60

모바일 화면에서 − / + 버튼이 표시됩니다. 창 너비를 줄여 확인해 보세요.

밝기 — slider_stepper_always40%

모든 화면 크기에서 스텝 버튼이 표시됩니다. step=5로 5%씩 증감합니다.

비활성30

색상

color_primary(기본) · color_success · color_danger · color_warning으로 트랙·썸 색을 지정합니다.

Primary60

Success70

Danger40

Warning80

상태

비활성·오류(is-error) 상태를 지원합니다.

기본50

비활성30

폼 레이아웃

form_field · form_vertical · form_horizontal과 함께 사용합니다.

API · Props

Prop	타입	기본값	설명
`model-value`	number	—	제어 값. v-model 바인딩
`default-value`	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	—	상단 라벨
`show-value`	boolean	false	현재 값 output 표시
`value-suffix`	string	—	값 뒤 단위 (%, px 등)
`hint`	string	—	하단 힌트 텍스트
`stepper`	boolean	false	± 스텝 버튼 (slider_stepper)
`stepper-always`	boolean	false	스텝 버튼 항상 표시
`decrease-label`	string	값 줄이기	감소 버튼 aria-label
`increase-label`	string	값 늘리기	증가 버튼 aria-label
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

API · Slots

슬롯	설명
`default`	추가 콘텐츠 (눈금 등)

API · Events

이벤트	설명
`update:modelValue`	값 변경 시 (v-model)

클래스 · 속성

Vue 컴포넌트가 렌더하는 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	스텝 버튼 크기