7onicDESIGN SYSTEM

Slider

Slider는 지정된 범위 내에서 값을 선택하는 입력 컨트롤입니다. 단일 값 선택과 범위 선택을 모두 지원합니다.

Tooltip
Labels
3
Sizes
S/R
Mode
Radix
Base

Playground

미리보기
Dsingle
Size
Color
Mode
Step
Direction
Tooltip
Options
<Slider
  defaultValue={[50]}
/>

Sizes

sm
트랙4px
썸14px
default
트랙6px
썸18px
lg
트랙8px
썸22px

Features

Range

defaultValue에 두 개의 값을 전달하면 범위 슬라이더로 동작합니다.

<Slider defaultValue={[25, 75]} />

With Value

제어 모드에서 값을 표시하는 패턴입니다.

50
const [value, setValue] = useState([50])

<div className="space-y-4">
  <div className="text-center">
    <span className="text-2xl font-bold text-foreground tabular-nums">{value[0]}</span>
  </div>
  <Slider value={value} onValueChange={setValue} />
</div>

States

Default
Disabled
<Slider defaultValue={[50]} />
<Slider defaultValue={[50]} disabled />

API

Props

valueundefined
number[]

제어 모드에서의 값 (배열)

defaultValueundefined
number[]

비제어 모드에서 초기값 (배열)

onValueChangeundefined
(value: number[]) => void

값 변경 시 콜백 (드래그 중에도 발생)

onValueCommitundefined
(value: number[]) => void

드래그 완료 시 콜백

color"default"
"default" | "primary"

Range와 Thumb의 색상

size"default"
"sm" | "default" | "lg"

슬라이더 크기

min0
number

최솟값

max100
number

최댓값

step1
number

스텝 값

minStepsBetweenThumbs0
number

Range 모드에서 Thumb 간 최소 스텝 수

showTooltip"never"
"auto" | "always" | "never"

툴팁 표시 모드. auto는 호버/드래그 시 표시

formatLabelundefined
(value: number) => string

툴팁 값 포맷 함수

startContentundefined
ReactNode

슬라이더 왼쪽에 표시할 콘텐츠 (아이콘, 라벨 등)

endContentundefined
ReactNode

슬라이더 오른쪽에 표시할 콘텐츠

disabledfalse
boolean

비활성화 상태

orientation"horizontal"
"horizontal" | "vertical"

표시 방향

invertedfalse
boolean

값 방향 반전

nameundefined
string

폼의 name 속성

Customization

startContent / endContent에 ReactNode를 전달하여 스타일을 자유롭게 커스터마이즈할 수 있습니다.

아이콘 포함

startContent={<VolumeOff />} endContent={<Volume2 />}

스타일 라벨

$0$100
startContent={<span className="text-xs font-mono font-bold text-primary">$0</span>} endContent={<span className="text-xs font-mono font-bold text-primary">$100</span>}

아이콘 + 툴팁

<Slider showTooltip="always" formatLabel={(v) => `${v}%`} startContent={<Sun />} endContent={<Sun />} />

Tip：startContent / endContent는 ReactNode를 받으므로 문자열, 아이콘, 커스텀 컴포넌트 등 무엇이든 전달할 수 있습니다. 폰트 크기는 Slider의 size에 맞춰 자동 조정됩니다.

Anatomy

1
60
2
3
050100
Track height6px
Thumb size18px
1
Track
슬라이더 전체 범위
2
Range
선택된 값의 범위
3
Thumb
드래그 가능한 핸들

Best Practices

✓

권장

  • ✓현재 값을 가까이에 표시하기
  • ✓적절한 step 값 설정하기
  • ✓범위 선택에는 range 모드 사용하기
  • ✓min/max 범위를 명확하게 정의하기
✕

지양

  • ✗정확한 값 입력에는 Input을 사용하기
  • ✗극단적으로 작은 step 값은 피하기
  • ✗값 표시 없이 사용하지 않기
  • ✗모바일에서 너무 좁은 슬라이더 피하기

Accessibility

키보드 조작

← →1스텝 증감
↑ ↓1스텝 증감
Home최솟값으로 이동
End최댓값으로 이동

ARIA 속성

  • role="slider" 자동 부여
  • aria-valuemin/max/now 자동 관리
  • 포커스 인디케이터
  • 터치 조작 지원