Slider

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

개요

iCignal Slider는 Foundation Slider를 확장하여 Handle 위치에 현재 값을 Tooltip으로 표시하는 기능을 추가합니다.

주요 특징

• ✅ 값 표시 Tooltip: Handle 위치에 현재 값 Tooltip 표시
• ✅ Tooltip 포맷: formatTooltip으로 표시 형식 커스터마이징
• ✅ 단일/Range Slider: 하나 또는 복수의 Handle 지원
• ✅ 범위 제한: min, max 값 설정
• ✅ step 조절: 증감 단위 설정
• ✅ 정렬 방향: 가로/세로 방향 지원
• ✅ 읽기 전용: disabled로 값 변경 제한
• ✅ 디자인 토큰: 테마 커스터마이징 지원

사용 예시

단일 Slider

<Slider defaultValue={[50]} />

Range Slider

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

읽기 전용 상태

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

값 표시 Tooltip

showTooltip을 활성화하면 Handle 위치에 현재 값이 Tooltip으로 표시됩니다.

<Slider defaultValue={[50]} showTooltip />

Tooltip 포맷 커스터마이징

formatTooltip 함수로 Tooltip에 표시되는 값의 형식을 지정할 수 있습니다.

<Slider
  defaultValue={[20, 80]}
  showTooltip
  formatTooltip={(v) => `${v}%`}
/>

Step 값 설정

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

정렬 방향

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

API Reference

Props

Foundation Slider의 모든 Props를 상속하며, 아래 Props가 추가됩니다.

Events

기본 사용법

import { Slider } from "@vortex/ui-icignal"
 
<Slider defaultValue={[50]} showTooltip />
<Slider
  defaultValue={[20, 80]}
  showTooltip
  formatTooltip={(v) => `${v}%`}
/>

접근성

권장 사항

• ✅ 키보드: Tab으로 Handle 포커스, 화살표 키로 값 조절
• ✅ Tooltip으로 현재 값을 시각적으로 확인 가능
• ✅ min/max로 유효 범위를 제한
• ❌ 범위 제한 없는 무한 슬라이더 지양

관련 컴포넌트

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