Slider

범위 내에서 값을 선택하거나 구간을 지정하는 슬라이더 컴포넌트

개요

Slider는 사용자가 지정된 범위 내에서 하나 이상의 값을 선택할 수 있는 컴포넌트입니다.

주요 특징

• ✅ 단일 Slider: 하나의 Handle로 단일 값 조절
• ✅ Range Slider: 두 개의 Handle로 최소~최대 범위 지정
• ✅ 범위 제한: min, max 값 설정
• ✅ step 조절: 증감 단위 설정
• ✅ 정렬 방향: 가로/세로 방향 지원
• ✅ 읽기 전용: disabled로 값 변경 제한
• ✅ 실시간 값 반영: onValueChange로 즉시 데이터 반영
• ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

단일 Slider

하나의 Handle을 사용해 단일 값을 조절합니다.

<Slider defaultValue={[50]} onValueChange={(val) => console.log(val)} />

Range Slider

두 개의 Handle을 사용해 최소~최대 범위를 지정합니다.

<Slider defaultValue={[20, 80]} />

읽기 전용 상태

disabled로 읽기 전용 상태를 시각적으로 구분하며 값 변경을 제한합니다.

<Slider defaultValue={[50]} disabled />
<Slider defaultValue={[20, 70]} disabled />

정렬 방향

orientation으로 가로 또는 세로 방향으로 배치할 수 있습니다.

<Slider defaultValue={[50]} orientation="vertical" />

최소/최대 값 설정

min/max로 값의 범위를 제한합니다.

<Slider defaultValue={[25]} min={0} max={50} />

Step 값 설정

step으로 값 변경 단위를 설정합니다.

<Slider defaultValue={[20]} step={10} />

API Reference

Props

Events

기본 사용법

import { Slider } from "@vortex/ui-foundation"
 
<Slider defaultValue={[50]} />
<Slider defaultValue={[20, 80]} min={0} max={100} step={5} />

접근성

권장 사항

• ✅ 키보드: Tab으로 Handle 포커스, 화살표 키로 값 조절
• ✅ min/max로 유효 범위를 제한
• ✅ ARIA role=“slider” 자동 적용
• ❌ 범위 제한 없는 무한 슬라이더 지양

관련 컴포넌트

• InputNumber: 숫자 직접 입력
• Progress: 진행 상태 표시