이 페이지는 Cloud Translation API를 통해 번역되었습니다.

슬라이더

Slider 컴포저블을 사용하면 사용자가 값 범위에서 선택할 수 있습니다. 슬라이더를 사용하여 사용자가 다음 작업을 하도록 할 수 있습니다.

볼륨, 밝기와 같은 값 범위를 사용하는 설정을 조정합니다.
가격대를 설정할 때처럼 그래프에서 데이터를 필터링합니다.
사용자 입력(예: 리뷰에서 평점 설정)

슬라이더에는 트랙, thumb, 값 라벨, 눈금 표시가 포함됩니다.

트랙: 트랙은 슬라이더가 취할 수 있는 값 범위를 나타내는 가로 막대입니다.
Thumb: thumb은 슬라이더에 있는 드래그 가능한 컨트롤 요소로, 이를 통해 사용자는 트랙에서 정의한 범위 내의 특정 값을 선택할 수 있습니다.
체크 표시: 체크표시는 슬라이더의 트랙을 따라 표시되는 시각적 마커 또는 표시기(선택사항)입니다.

엄지손가락, 트랙, 눈금 표시가 있는 슬라이더 — **그림 1.** 슬라이더 구현

기본 구현

전체 API 정의는 Slider 참조를 확인하세요. Slider 컴포저블의 주요 매개변수는 다음과 같습니다.

value: 슬라이더의 현재 값입니다.
onValueChange: 값이 변경될 때마다 호출되는 람다입니다.
enabled: 사용자가 슬라이더와 상호작용할 수 있는지 나타내는 불리언 값입니다.

다음 예는 간단한 슬라이더입니다. 이렇게 하면 사용자가 0.0에서 1.0까지 값을 선택할 수 있습니다. 사용자가 해당 범위에서 모든 값을 선택할 수 있으므로 슬라이더는 연속됩니다.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}Slider.kt

이 구현은 다음과 같이 표시됩니다.

트랙을 따라 약 3/4 지점에 값이 선택된 슬라이더 구성요소. — **그림 2.** 슬라이더의 기본 구현

고급 구현

더 복잡한 슬라이더를 구현할 때 다음 매개변수를 추가로 사용할 수 있습니다.

colors: 슬라이더의 색상을 제어할 수 있는 SliderColors의 인스턴스입니다.
valueRange: 슬라이더가 사용할 수 있는 값의 범위입니다.
steps: 슬라이더에서 엄지손가락이 스냅되는 노치의 수입니다.

다음 스니펫은 0.0~50.0 범위의 3단계로 구성된 슬라이더를 구현합니다. 썸이 각 단계에 스냅되므로 이 슬라이더는 개별입니다.

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}Slider.kt

구현은 다음과 같이 표시됩니다.

여기에 대체 텍스트를 작성하세요. — **그림 3.** 단계와 설정 값 범위가 있는 슬라이더

범위 슬라이더

전용 RangeSlider 컴포저블을 사용할 수도 있습니다. 이렇게 하면 사용자가 두 개의 값을 선택할 수 있습니다. 이는 사용자가 최소 및 최고 가격을 선택하려는 경우에 유용할 수 있습니다.

다음 예는 연속 범위 슬라이더의 비교적 간단한 예입니다.

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
        Text(text = sliderPosition.toString())
    }
}Slider.kt

두 개의 값이 선택된 범위 슬라이더 구성요소 라벨은 선택 영역의 상한과 하한을 표시합니다. — **그림 4.** 범위 슬라이더 구현

추가 리소스

Material UI 문서