このページは Cloud Translation API によって翻訳されました。

スライダ

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 つのステップを含むスライダーを実装し、 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

実装は次のようになります。

ここに代替テキストを入力 — **図 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 のドキュメント