スライダー

コンポーズ可能な Slider を使用すると、ユーザーが値の範囲から選択できます。スライダーを使用してユーザーが次の操作を行えるようにすることができます。

音量や明るさなど、値の範囲を使用する設定を調整する。
グラフのデータをフィルタする（価格帯を設定する場合など）。
ユーザー入力（レビューの評価の設定など）。

スライダーには、トラック、つまみ、値ラベル、目盛りが含まれています。

トラック: トラックは、スライダーが取り得る値の範囲を表す水平バーです。
つまみ: つまみは、スライダー上のドラッグ可能なコントロール要素です。ユーザーは、このつまみを使ってトラックで定義された範囲内の特定の値を選択します。
目盛り: 目盛りは、必要に応じてスライダーのトラックに沿って表示させることができる視覚的なマーカー / インジケーターです。

つまみ、トラック、目盛り付きのスライダー。 — **図 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

これを実装すると次のようになります。

トラックの 4 分の 3 程度の位置の値が選択されたスライダーコンポーネント。 — **図 2.**スライダーの基本的な実装。

高度な実装

より複雑なスライダーを実装する場合は、次のパラメータも使用できます。

colors: スライダーの色を制御できる SliderColors のインスタンス。
valueRange: スライダーが取り得る値の範囲。
steps: スライダーの刻み目の数。この刻み目でつまみが止まります。

次のスニペットでは、刻み目が 3 つある（steps の値が 3 に設定されている）0.0 から 50.0 までの範囲のスライダーが実装されます。各刻み目でつまみが止まるため、このスライダーは「離散型」です。

@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

実装されると次のように表示されます。

範囲が 0～50 で、等間隔で 5 つの目盛りが表示されている離散型スライダー。つまみが 2 番目の目盛りの近くにあり、16 が選択されていることを示しています。 — **図 3.** 複数の刻み目と値の範囲が設定されたスライダー。

範囲スライダー

コンポーズ可能な専用の RangeSlider を使用することもできます。これにより、ユーザーは 2 つの値を選択できます。これは、ユーザーが最小価格と最大価格を選択したい場合などに役立ちます。

次の例は、連続型の範囲スライダーの比較的簡単な例です。

@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

2 つの値が選択された範囲スライダーコンポーネント。ラベルには、選択範囲の上限と下限が表示されています。 — **図 4.**範囲スライダーの実装。

参考情報

マテリアル UI のドキュメント