Crea un control deslizante para un rango de valores
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El elemento componible Slider permite que los usuarios seleccionen un rango de valores. Puedes usar un control deslizante para permitir que el usuario haga lo siguiente:
Ajusta la configuración que usa un rango de valores, como el volumen y el brillo.
Filtrar datos en un gráfico, como cuando estableces un rango de precios
Entrada del usuario, como establecer una calificación en una opinión
El control deslizante contiene una pista, un control deslizante, una etiqueta de valor y marcas de verificación:
Rastro: Es la barra horizontal que representa el rango de valores que puede tomar el control deslizante.
Pulgar: Es un elemento de control que se puede arrastrar en el control deslizante que permite al usuario seleccionar un valor específico dentro del rango definido por la pista.
Marcas de verificación: Las marcas de verificación son marcadores o indicadores visuales opcionales que aparecen a lo largo de la barra del control deslizante.
En este tema, se muestran las siguientes implementaciones de controles deslizantes:
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Crea un control deslizante básico
El siguiente ejemplo es un control deslizante sencillo. Eso permite al usuario seleccionar un valor de 0.0 a 1.0. Como el usuario puede seleccionar cualquier valor de ese rango, el control deslizante es continuo.
Resultados
Figura 1: Una implementación básica de un control deslizante.
Cómo crear un control deslizante avanzado
En el siguiente fragmento, se implementa un control deslizante que tiene tres pasos, con un rango de 0.0 a 50.0. Debido a que el control deslizante se ajusta a cada paso, este es discreto.
Resultados
Figura 2: Un control deslizante con pasos y un rango de valores establecido.
Control deslizante de rango
También puedes usar el elemento componible RangeSlider exclusivo. Esto permite que el usuario seleccione dos valores. Esto puede ser útil en casos como cuando el usuario desea seleccionar un precio mínimo y máximo.
El siguiente ejemplo es un ejemplo relativamente sencillo de un control deslizante de rango continuo:
Resultados
Figura 3: Implementación de un control deslizante de rango.
Puntos clave
Consulta la referencia de Slider para obtener una definición completa de la API. Estos son algunos de los parámetros clave del elemento componible Slider:
value: Es el valor actual del control deslizante.
onValueChange: Es una expresión lambda a la que se llama cada vez que cambia el valor.
enabled: Es un valor booleano que indica si el usuario puede interactuar con el control deslizante.
Cuando implementes un control deslizante más complejo, también puedes usar los siguientes parámetros.
colors: Es una instancia de SliderColors que te permite controlar los colores del control deslizante.
valueRange: Es el rango de valores que puede tomar el control deslizante.
steps: Es la cantidad de muescas en el control deslizante al que se ajusta el pulgar.
También puedes pasarle a Slider un elemento thumb y track componible para personalizar el aspecto del componente de forma más detallada.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar componentes interactivos
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-02-06 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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)"]]
