Control deslizante

El elemento Slider componible permite a los usuarios realizar selecciones de un rango de de salida. Puedes usar un control deslizante para permitir que el usuario haga lo siguiente:

  • Ajusta la configuración que utiliza 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:

  • Seguimiento: Es la barra horizontal que representa el intervalo 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: Son indicadores o marcadores visuales opcionales que junto al seguimiento del control deslizante.
Un control deslizante con el pulgar, una pista y marcas.
Figura 1: Implementación de un 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 directo. Eso le permite al usuario selecciona un valor de 0.0 a 1.0. Como el usuario puede seleccionar cualquier valor en ese rango, el control deslizante será continuo.

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

Esta implementación aparece de la siguiente manera:

Un componente de control deslizante con un valor seleccionado aproximadamente a tres cuartos de la pista.
Figura 2: Una implementación básica de un control deslizante

Implementación avanzada

Al implementar un control deslizante más complejo, también puedes usar el los siguientes parámetros.

  • colors: Es una instancia de SliderColors que te permite controlar la colores del control deslizante.
  • valueRange: Es el rango de valores que puede tomar el control deslizante.
  • steps: Indica la cantidad de muescas del control deslizante a las que se ajusta el círculo.

En el siguiente fragmento, se implementa un control deslizante con tres pasos, con un rango de 0.0 a 50.0. Como el pulgar se ajusta a cada paso, este deslizador discretos.

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

La implementación aparece de la siguiente manera:

Escribe tu texto alternativo aquí
Figura 3: Un control deslizante con pasos y un rango de valores establecido.

Control deslizante de rango

También puedes usar el elemento componible RangeSlider dedicado. Esto permite que el usuario seleccionar dos valores. Esto puede ser útil en casos como cuando el usuario desea selecciona 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())
    }
}
Slider.kt

Componente de un control deslizante de rango con dos valores seleccionados. Una etiqueta muestra los límites inferior y superior de la selección.
Figura 4: Implementación de un control deslizante de rango

Recursos adicionales