Slider

Field

Slider를 Field 내부에서 사용하여 Slider Field로 활용할 수 있습니다.

Anatomy

Slider는 Track(Active, Inactive), Handle, Steps, Marker로 이뤄져있습니다.

Properties

Value

Slider는 선택하는 Value에 따라 핸들 개수가 바뀝니다.

State

Tick Mark property

Tick Mark는 사용성에 따라 두 모드 중 하나를 사용할 수 있습니다.

연속형(Continuous) 모드: '시각적 가이드'를 위한 Tick Mark

연속형 모드에서는 사용자가 값의 위치를 쉽게 파악할 수 있도록 참조점(Reference point)으로 틱 마크를 제공할 수 있습니다.

이산형(Discrete) 모드: '스냅(Snap)'을 위한 Tick Mark

이산형 모드에서 틱 마크는 사용자가 선택할 수 있는 유일한 값(Step)을 의미합니다. 이를 시각적으로 보여줄 수 있도록, 연속적인 모드보다 훨씬 더 큰 Tick Mark를 가지고 있습니다.

Tick Mark는 총 2~5개의 스텝을 표현할 수 있습니다.

Markers Property

Markers는 Tick Mark의 정보를 전달합니다. step에 맞게 count를 설정할 수 있으며, 최솟값과 최댓값만 표시하는 경우 count 2로 표현합니다.

Active Track

핸들이 시작점부터 현재 위치까지 지나온 경로를 보여주는 **활성 트랙(Active Track)**은 사용자의 선택에 따라 표시(Show)하거나 숨길(Hide) 수 있습니다.

기본적으로 선택된 값의 크기나 진행 정도를 시각적으로 명확하게 전달할 수 있도록 Active Track이 보여집니다.

특정한 값 자체를 선택하는 것이 중요할 때 Active Track을 숨겨 선택된 값을 강조할 수 있습니다.

Guidelines

Slider touch target

Drag

Slider에서 다양한 행동으로 값을 선택할 수 있습니다. 기본적으로 Handle을 드래그해서 값을 선택할 수 있습니다.

Tap jump

트랙의 원하는 지점을 탭하면, 핸들이 해당 위치로 바로 이동하며 값이 선택됩니다.

상황에 맞게 단계 제공하기

Slider는 기본적으로 연속적인(Continuous) 값을 다루지만, 사용자가 선택해야 하는 값의 성격에 따라, 의도적으로 움직임을 제한하는(Discrete) 단계를 제공할지 결정해야 합니다.

합리적인 기본값을 제공하기

'합리적인 기본값(Reasonable Default)'은 사용자가 페이지에 진입하거나 컴포넌트를 처음 마주했을 때, 미리 설정되어 있는 Slider의 초기값을 의미합니다.

이 값은 사용자의 추가 조작 없이도 가장 안전하거나, 가장 일반적이거나, 가장 권장되는 상태를 제공하여 사용자의 수고를 덜고 실수를 방지하는 데 목적이 있습니다.

현재 값을 명확히 표시하기

현재 값을 명확히 표시하는 것은 의도한 대로 시스템이 작동하고 있음을 인지하는 데 중요하기에 Active시 현재의 값을 보여주는 Value indicator를 활용하는 것이 좋습니다.

Value Indicator 오버플로우 방지하기

Thumb이 트랙 양 끝에 도달하면, Value Indicator가 영역을 벗어나지 않도록 안쪽으로 위치를 보정합니다.

Slider V3 변경점

• 색상 시스템 개편: 주요 버튼 등의 핵심 액션과의 시각적 혼동을 방지하기 위해 기존 Brand 컬러를 제거했습니다. 대신, UI 전반의 시각적 위계를 고려하여 새롭게 Neutral 톤을 추가했습니다.
• Active 상태 추가: 접근성과 사용성 향상을 위해 사용자가 핸들을 성공적으로 잡고 제어 중임을 즉각적으로 알려주는 active(활성/누름) 상태가 추가되었습니다.
• tick mark - Mode 추가: Slider가 특정 단계로만 움직이는 '이산형(Discrete)' 모드인지, 부드럽게 조절되는 '연속형(Continuous)' 모드인지 사용자가 명확히 구분할 수 있도록, 사용 상황에 맞춘 틱 마크(tick mark)의 Mode를 추가했습니다.

Specification

Slider

base

상태	슬롯	속성	값
enabled	root	gap	$dimension.x0_5
	control	height	26px
	track	height	$dimension.x1
		cornerRadius	$radius.full
		color	$color.palette.gray-400
	range	cornerRadius	$radius.full
		color	$color.fg.neutral
		widthDuration	$duration.d3
		widthTimingFunction	$timing-function.easing
	thumb	size	$dimension.x5
		cornerRadius	$radius.full
		color	$color.bg.neutral-inverted
	valueIndicatorRoot	color	$color.bg.neutral-inverted
		cornerRadius	$radius.r1
		paddingX	$dimension.x1_5
		paddingY	$dimension.x0_5
		offsetY	$dimension.x3
		enterScale	0.9
		enterOpacity	0
		enterDuration	$duration.d4
		enterTimingFunction	$timing-function.enter
		exitScale	1
		exitOpacity	0
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.easing
	valueIndicatorArrow	color	$color.bg.neutral-inverted
		width	$dimension.x2_5
		height	7px
		cornerRadius	$radius.r0_5
		gutter	$dimension.x0_5
		padding	$dimension.x0_5
	valueIndicatorLabel	color	$color.fg.neutral-inverted
		fontSize	$font-size.t1
		lineHeight	$line-height.t1
		fontWeight	$font-weight.medium
	marker	color	$color.fg.neutral-muted
		fontWeight	$font-weight.regular
		fontSize	$font-size.t3
		lineHeight	$line-height.t3
disabled	range	color	$color.fg.disabled
	thumb	color	$color.fg.disabled
	marker	color	$color.fg.disabled

Slider Tick

base

상태	슬롯	속성	값
enabled	root	color	$color.fg.neutral-inverted

weight=thin

상태	슬롯	속성	값
enabled	root	width	1px

weight=thick

상태	슬롯	속성	값
enabled	root	width	$dimension.x1

Slider Thumb

base

상태	슬롯	속성	값
enabled	root	size	$dimension.x5
		cornerRadius	$radius.full
		color	$color.bg.neutral-inverted
		scaleDuration	$duration.d3
		scaleTimingFunction	$timing-function.easing
		translateDuration	$duration.d3
		translateTimingFunction	$timing-function.easing
disabled	root	color	$color.fg.disabled
pressed	root	scale	1.2