[null,null,["最后更新时间 (UTC):2025-02-06。"],[],[],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)"]]