Control deslizante

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

• Ajustar parámetros de configuración que usan un rango de valores, como el volumen y el brillo
• Filtrar 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, un control, una etiqueta de valor y marcas de graduación:

• Pista: La pista es la barra horizontal que representa el rango de valores que puede tomar el control deslizante.
• Control deslizante: El control deslizante es un elemento de control que se puede arrastrar y que permite al usuario seleccionar un valor específico dentro del rango definido por la pista.
• Marcas de graduación: Son marcadores o indicadores visuales opcionales que aparecen a lo largo de la pista del control deslizante.

Figura 1: Es una implementación de un control deslizante.

Implementación básica

Consulta la referencia de Slider para obtener una definición completa de la API. Algunos de los parámetros clave para el elemento Slider componible son los siguientes:

• 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.

El siguiente ejemplo es un control deslizante sencillo. Permite que el usuario seleccione un valor de 0.0 a 1.0. Como el usuario puede seleccionar cualquier valor en 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())
    }
}
Slider.kt

Esta implementación se ve de la siguiente manera:

Figura 2: Es una implementación básica de un control deslizante.

Implementación avanzada

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 a las que se ajusta el pulgar.

En el siguiente fragmento, se implementa un control deslizante que tiene tres pasos, con un rango de 0.0 a 50.0. Como el control deslizante se ajusta a cada paso, 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())
    }
}
Slider.kt

La implementación aparece de la siguiente manera:

Figura 3: Un control deslizante con pasos y un rango de valores establecido.

Nota: El principio y el final de un control deslizante cuentan como "pasos". En el ejemplo anterior, en el que el rango es 0f..50f y la cantidad de steps es 3, cada intervalo del rango es 12.5 porque el principio y el final del control deslizante también son intervalos que el usuario puede seleccionar.

Nota: También puedes pasar Slider a un elemento componible thumb y track para personalizar de forma más detallada la apariencia del componente.

Control deslizante de rango

También puedes usar el elemento de componibilidad 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 sencillo de un control deslizante de rango continuo.

@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

Figura 4: Es una implementación de un control deslizante de rango.

Recursos adicionales

• Documentación de Material UI