Sliders

Slider는 최솟값~최댓값 범위에서 단일 값 또는 범위를 선택하는 컴포넌트입니다. 트랙을 클릭하거나 핸들을 드래그해서 값을 조정할 수 있습니다.

Figma 컴포넌트: Slider, _Control handle

Single value

하나의 핸들로 단일 값을 선택합니다.

두 개의 핸들로 범위(시작 ~ 끝)를 선택합니다.

핸들에 현재 값을 표시하는 방법은 3가지입니다.

라벨 없이 핸들만 표시합니다.

핸들 아래에 값을 텍스트로 표시합니다.

25%

75%

핸들 위에 라운드 박스로 값을 띄워 표시합니다.

25%

75%

핸들 자체의 표현 방식을 3가지로 변경할 수 있습니다.

빈 원 형태의 기본 핸들입니다.

핸들 안에 현재 값을 작은 텍스트로 표시합니다.

50%

25%

75%

핸들 위에 짙은 색 툴팁(말풍선)으로 값을 표시합니다.

min, max, step prop으로 범위와 단위를 조정할 수 있습니다.

400%

Prop	Type	Default	Description
`value`	number \| [number, number]	`-`	제어 모드 값
`defaultValue`	number \| [number, number]	`50 / [25, 75]`	비제어 모드 초기 값
`range`	boolean	`false`	범위(두 핸들) 모드
`min`	number	`0`	최솟값
`max`	number	`100`	최댓값
`step`	number	`1`	값 증감 단위
`label`	false \| 'bottom' \| 'top-floating'	`false`	값 라벨 위치
`handleType`	'plain' \| 'text' \| 'tooltip'	`'plain'`	핸들 표현 방식
`width`	number \| string	`-`	슬라이더 너비
`onChange`	(value) => void	`-`	값 변경 콜백

Property	Values
Type	`False` `Text` `Tooltip`
State	`Default` `Hover` `Focused`