Schieberegler

Mit dem Compose-Element Slider können Nutzer eine Auswahl aus einer Reihe von Werten treffen. Mit einem Schieberegler können Sie Nutzern Folgendes ermöglichen:

  • Einstellungen anpassen, die einen Wertebereich verwenden, z. B. Lautstärke und Helligkeit.
  • Daten in einem Diagramm filtern, z. B. beim Festlegen einer Preisspanne.
  • Nutzereingaben, z. B. das Festlegen einer Bewertung in einer Rezension.

Der Schieberegler enthält eine Schiene, einen Ziehpunkt, ein Wertelabel und Teilstriche:

  • Track: Der Track ist der horizontale Balken, der den Wertebereich des Schiebereglers darstellt.
  • Schieberegler: Der Schieberegler ist ein ziehbares Steuerelement, mit dem der Nutzer einen bestimmten Wert innerhalb des durch die Spur definierten Bereichs auswählen kann.
  • Teilstriche: Teilstriche sind optionale visuelle Markierungen oder Indikatoren, die entlang der Schieberegler-Leiste angezeigt werden.
Ein Schieberegler mit Ziehpunkt, Schiene und Markierungen.
Abbildung 1. Eine Implementierung eines Schiebereglers.

Einfache Implementierung

Eine vollständige API-Definition finden Sie in der Referenz zu Slider. Hier sind einige der wichtigsten Parameter für das Slider-Composable:

  • value: Der aktuelle Wert des Schiebereglers.
  • onValueChange: Ein Lambda, das jedes Mal aufgerufen wird, wenn der Wert geändert wird.
  • enabled: Ein boolescher Wert, der angibt, ob der Nutzer mit dem Schieberegler interagieren kann.

Das folgende Beispiel ist ein einfacher Schieberegler. Der Nutzer kann einen Wert zwischen 0.0 und 1.0 auswählen. Da der Nutzer einen beliebigen Wert in diesem Bereich auswählen kann, ist der Schieberegler kontinuierlich.

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

Diese Implementierung sieht so aus:

Eine Schieberegler-Komponente, bei der ein Wert etwa drei Viertel entlang der Spur ausgewählt ist.
Abbildung 2: Eine einfache Implementierung eines Schiebereglers.

Erweiterte Implementierung

Wenn Sie einen komplexeren Schieberegler implementieren, können Sie zusätzlich die folgenden Parameter verwenden.

  • colors: Eine Instanz von SliderColors, mit der Sie die Farben des Schiebereglers steuern können.
  • valueRange: Der Wertebereich, den der Schieberegler annehmen kann.
  • steps: Die Anzahl der Kerben auf dem Schieberegler, an denen der Schieberegler einrastet.

Im folgenden Snippet wird ein Schieberegler mit drei Schritten und einem Bereich von 0.0 bis 50.0 implementiert. Da der Schieberegler bei jedem Schritt einrastet, ist er diskret.

@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())
    }
}

Die Implementierung sieht so aus:

Ein Schieberegler mit einem Bereich von 0 bis 50 und fünf Markierungen in gleichen Abständen. Der Schieberegler befindet sich in der Nähe der zweiten Markierung, was auf einen ausgewählten Wert von 16 hinweist.
Abbildung 3: Ein Schieberegler mit Schritten und einem festgelegten Wertebereich.

Bereichsschieberegler

Sie können auch die dedizierte RangeSlider komponierbare Funktion verwenden. So kann der Nutzer zwei Werte auswählen. Das kann nützlich sein, wenn der Nutzer beispielsweise einen Mindest- und einen Höchstpreis auswählen möchte.

Das folgende Beispiel ist ein relativ einfaches Beispiel für einen kontinuierlichen Bereichsschieberegler.

@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())
    }
}

Eine Bereichsschieberegler-Komponente mit zwei ausgewählten Werten. In einem Label werden die Ober- und Untergrenze der Auswahl angezeigt.
Abbildung 4: Eine Implementierung eines Bereichsschiebereglers.

Zusätzliche Ressourcen