Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Mit dem Slider-Komposit können Nutzer aus einer Reihe von Werten auswählen. Mit einem Schieberegler können Sie Nutzern Folgendes ermöglichen:
Einstellungen anpassen, die einen Bereich von Werten verwenden, z. B. Lautstärke und Helligkeit
Daten in einem Diagramm filtern, z. B. durch Festlegen eines Preisbereichs
Nutzereingaben, z. B. das Festlegen einer Bewertung in einer Rezension
Der Schieberegler enthält einen Track, einen Schieberegler, ein Wertlabel und Markierungen:
Track: Der Track ist der horizontale Balken, der den Bereich der Werte darstellt, die der Schieberegler haben kann.
Schieberegler: Der Schieberegler ist ein verschiebbares Steuerelement auf dem Schieberegler, mit dem Nutzer einen bestimmten Wert innerhalb des vom Track definierten Bereichs auswählen können.
Markierungen: Markierungen sind optionale visuelle Markierungen oder Indikatoren, die entlang des Schiebereglers angezeigt werden.
In diesem Thema werden die folgenden Schiebereglerimplementierungen gezeigt:
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Einfachen Schieberegler erstellen
Das folgende Beispiel zeigt einen einfachen Schieberegler. So kann der Nutzer 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.
Ergebnisse
Abbildung 1 Eine einfache Implementierung eines Schiebereglers.
Erweiterten Schieberegler erstellen
Das folgende Snippet implementiert einen Schieberegler mit drei Schritten im Bereich von 0.0 bis 50.0. Da der Schieberegler an jedem Schritt anhält, ist er diskret.
Ergebnisse
Abbildung 2. Ein Schieberegler mit Schritten und einem festgelegten Wertebereich.
Bereichsschieberegler
Sie können auch die spezielle RangeSlider-Komposition verwenden. So kann der Nutzer zwei Werte auswählen. Das kann beispielsweise nützlich sein, wenn der Nutzer einen Mindest- und einen Höchstpreis auswählen möchte.
Das folgende Beispiel ist ein relativ einfaches Beispiel für einen Schieberegler mit kontinuierlichem Bereich:
Ergebnisse
Abbildung 3 Eine Implementierung eines Schiebereglers für einen Bereich.
Wichtige Fakten
Eine vollständige API-Definition finden Sie in der Slider-Referenz. Zu den wichtigsten Parametern für die Slider-Komposition gehören:
value: Der aktuelle Wert des Schiebereglers.
onValueChange: Eine Lambda-Funktion, die jedes Mal aufgerufen wird, wenn sich der Wert ändert.
enabled: Ein boolescher Wert, der angibt, ob der Nutzer mit dem Schieberegler interagieren kann.
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 haben kann.
steps: Die Anzahl der Kerben am Schieberegler, an denen der Schieberegler einrastet.
Sie können Slider auch ein thumb- und ein track-Kompositelement übergeben, um das Erscheinungsbild der Komponente noch weiter anzupassen.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-02-06 (UTC)."],[],[],null,["# Create a slider for a range of values\n\n\u003cbr /\u003e\n\nThe [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) composable lets users make selections from a range of\nvalues. You might use a slider to let the user do the following:\n\n- Adjust settings that use a range of values, such as volume, and brightness.\n- Filter data in a graph, as when setting a price range.\n- User input, like setting a rating in a review.\n\nThe slider contains a track, thumb, value label, and tick marks:\n\n- **Track**: The track is the horizontal bar that represents the range of values the slider can take.\n- **Thumb**: The thumb is a draggable control element on the slider that allows the user to select a specific value within the range defined by the track.\n- **Tick marks**: Tick marks are optional visual markers or indicators that appear along the track of the slider.\n\nThis topic shows the following slider implementations:\n\n- [Basic](#basic-implementation)\n- [Advanced](#advanced-implementation)\n- [Range](#range-slider)\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a basic slider\n---------------------\n\nThe following example is a straightforward slider. That allows the user to\nselect a value from `0.0` to `1.0`. Because the user can select any value in\nthat range, the slider is *continuous*.\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun SliderMinimalExample() {\n var sliderPosition by remember { mutableFloatStateOf(0f) }\n Column {\n Slider(\n value = sliderPosition,\n onValueChange = { sliderPosition = it }\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L59-L70\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** A basic implementation of a slider.\n\nCreate an advanced slider\n-------------------------\n\nThe following snippet implements a slider that has three steps, with a range\nfrom `0.0` to `50.0`. Because the thumb snaps to each step, this slider is\n*discrete*.\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun SliderAdvancedExample() {\n var sliderPosition by remember { mutableFloatStateOf(0f) }\n Column {\n Slider(\n value = sliderPosition,\n onValueChange = { sliderPosition = it },\n colors = SliderDefaults.colors(\n thumbColor = MaterialTheme.colorScheme.secondary,\n activeTrackColor = MaterialTheme.colorScheme.secondary,\n inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,\n ),\n steps = 3,\n valueRange = 0f..50f\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L74-L92\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** A slider with steps and a set value range. **Note:** The very beginning and end of a slider count as \"steps\". In the preceding example where the range is `0f..50f` and the number of `steps` is `3`, each interval along the range is `12.5` because the beginning and end of the slider are also intervals the user can select.\n\nRange slider\n------------\n\nYou can also use the dedicated [`RangeSlider`](/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)) composable. This allows the user to\nselect two values. This can be useful in cases such as when the user wishes to\nselect a minimum and maximum price.\n\nThe following example is a relatively straightforward example of a continuous\nrange slider:\n\n\u003cbr /\u003e\n\n```kotlin\n@Preview\n@Composable\nfun RangeSliderExample() {\n var sliderPosition by remember { mutableStateOf(0f..100f) }\n Column {\n RangeSlider(\n value = sliderPosition,\n steps = 5,\n onValueChange = { range -\u003e sliderPosition = range },\n valueRange = 0f..100f,\n onValueChangeFinished = {\n // launch some business logic update with the state you hold\n // viewModel.updateSelectedSliderValue(sliderPosition)\n },\n )\n Text(text = sliderPosition.toString())\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Slider.kt#L96-L113\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** An implementation of a range slider.\n\nKey points\n----------\n\nSee the [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) reference for a full API definition. Some of the key\nparameters for the `Slider` composable are the following:\n\n- **`value`**: The current value of the slider.\n- **`onValueChange`**: A lambda that gets called every time the value is changed.\n- **`enabled`**: A boolean value that indicates if the user can interact with the slider.\n\nWhen implementing a more complex slider, you can additionally make use of the\nfollowing parameters.\n\n- **`colors`** : An instance of `SliderColors` that lets you control the colors of the slider.\n- **`valueRange`**: The range of values that the slider can take.\n- **`steps`**: The number of notches on the slider to which the thumb snaps.\n\nYou can also pass `Slider` a `thumb` and `track` composable to more\nthoroughly customize the appearance of the component.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
