El elemento componible Slider
permite que los usuarios seleccionen elementos de 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.
- Filtra datos en un gráfico, como cuando se establece un intervalo de precios.
- Entrada del usuario, como establecer una calificación en una opinión.
El control deslizante contiene una pista, una miniatura, 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.
- Thumb: Es un elemento de control que se puede arrastrar del control deslizante. permite al usuario seleccionar un valor específico dentro del rango definido por el de seguimiento.
- 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.
Implementación básica
Consulta la referencia de Slider
para obtener una definición completa de la API. Algunas de las claves
Los parámetros del elemento componible Slider
son los siguientes:
value
: Es el valor actual del control deslizante.onValueChange
: Es una lambda que se llama cada vez que se asigna el valor. cambió.enabled
: Un valor booleano que indica si el usuario puede interactuar con el control deslizante.
El siguiente ejemplo es un control deslizante sencillo. Eso le permite al usuario
selecciona un valor de 0.0
a 1.0
. Como el usuario puede seleccionar cualquier valor de ese rango, el control deslizante es continuo.
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
Esta implementación aparece de la siguiente manera:
Implementación avanzada
Cuando implementes un control deslizante más complejo, también puedes usar los siguientes parámetros.
colors
: Es una instancia deSliderColors
que te permite controlar la 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.
En el siguiente fragmento, se implementa un control deslizante con 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.
@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()) } }
La implementación aparece de la siguiente manera:
Control deslizante de rango
También puedes usar el elemento componible RangeSlider
dedicado. 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 claro de una control deslizante de rango.
@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()) } }