スライダー

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

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

スライダー コンポーネント。値がトラックの 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 コンポーザブルを使用することもできます。これにより、ユーザーは 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. 範囲スライダーの実装。

参考情報