Slider

사용자가 특정 범위 내에서 값을 선택할 수 있게 해주는 입력 요소입니다. 드래그나 클릭을 통해 연속적인 값이나 단계별 값을 직관적으로 조정할 수 있습니다.

Design

Web

iOS

Android

WantedSlider

단일 값을 선택할 수 있는 Slider 컴포넌트입니다. 사용자가 Thumb을 이동하여 하나의 값을 선택할 수 있습니다.

var sliderValue by remember { mutableFloatStateOf(30f) }

WantedSlider(
    value = sliderValue,
    valueRange = 0f..100f,
    header = "볼륨",
    label = "${sliderValue.toInt()}",
    onValueChange = { sliderValue = it }
)

Parameters

이름	타입	설명
`value`	Float	현재 선택된 값입니다.
`valueRange`	ClosedFloatingPointRange<Float>	Slider가 선택할 수 있는 값의 범위입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`header`	String	상단에 표시할 헤더 텍스트입니다.
`label`	String	하단에 표시할 라벨 텍스트입니다.
`enabled`	Boolean	Slider 활성화 여부입니다.
`onValueChange`	(Float) -> Unit	값이 변경될 때 호출되는 콜백입니다.

Overload

범위를 선택할 수 있는 Slider 컴포넌트입니다. 사용자가 양 끝Thumb을 조절하여 최소값과 최대값을 선택할 수 있습니다.

var rangeValue by remember { mutableStateOf(10f..90f) }

WantedSlider(
    value = rangeValue,
    valueRange = 0f..100f,
    header = "가격 범위",
    labelMin = "${rangeValue.start.toInt()}만원",
    labelMax = "${rangeValue.endInclusive.toInt()}만원",
    onValueChange = { rangeValue = it }
)

Parameters

이름	타입	설명
`value`	ClosedFloatingPointRange<Float>	현재 선택된 값의 범위입니다.
`valueRange`	ClosedFloatingPointRange<Float>	선택 가능한 값의 최소/최대 범위입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`header`	String	상단에 표시할 헤더 텍스트입니다.
`labelMin`	String	최소값 라벨 텍스트입니다.
`labelMax`	String	최대값 라벨 텍스트입니다.
`enabled`	Boolean	Slider 활성화 여부입니다.
`onValueChange`	(ClosedFloatingPointRange<Float>) -> Unit	값이 변경될 때 호출되는 콜백입니다.