# [CSA0X Desliza y elige con `Slider`]

## La función `Slider`

El componente `Slider` permite al usuario elegir un valor entre una lista predefinida usando el indicador desplazable. Para crear este componente, simplemente llamamos a la función indicando el valor máximo y la función que responderá al cambiar de valor el indicador:

@Composable
fun BasicSlider() {
    Slider(value = 3F, onValueChange = {/*TODO*/ })
}

La lista completa de parámetros y su función son los siguientes:

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SliderColors = SliderDefaults.colors()
)

- **value**: Valor seleccionado en el deslizador.
- **onValueChange**: Función que responde cuando se cambia el valor seleccionado.
- **modifier**: Modificador aplicado al deslizador.
- **valueRange**: Rango de valores elegibles en el deslizador.
- **steps**: Número de pasos en los que se divide el deslizador.
- **onValueChangeFinished**: Función lanzada una vez cambiado el valor seleccionado del deslizador.
- **interactionSource**: Estados de interacción del deslizador.
- **colors**: Paleta de colores modificables del deslizador.

Obviamente, sin gestionar el cambio de valor no tiene sentido declarar un deslizador, así que mínimamente usable, teniendo en cuenta los cambios de valor seleccionado sería:

@Composable
fun StateSliderExample(){
    val state = remember{ mutableStateOf(0F) }
    Slider(
        value = state.value,
        onValueChange = { newValue ->
            state.value = newValue
        })
}


## Gestionando rangos continuos y discretos

Vamos a dar un paso más y asignamos un rango de valores al deslizador para ver su comportamiento:

@Composable
fun ContinuousRangeSliderExample(){
    Column {
        val state = remember{ mutableStateOf(0F) }
        Text(text = state.value.toString())
        Slider(
            value = state.value,
            onValueChange = { newValue ->
                state.value = newValue
            },
            valueRange = 0F..5F)
    }
}


Como se puede apreciar al desplazar, indicando únicamente el rango el deslizador es continuo, tomando todos los valores posibles.

Para transformar el deslizador a un rango discreto, en primer lugar deberemos indicar el número de pasos, pero además tendremos que trabajar con valores enteros, así tendremos que redondear el valor con `roundToInt` para obtener el entero correspondiente, y al valor guardado en el estado hacerle una transformación `float` que es lo que acepta la función. Nos quedaría algo así:

@Composable
fun DiscreteRangeSliderExample() {
    Column {
        val state = remember { mutableStateOf(0) }
        Text(text = state.value.toString())
        Slider(
            value = state.value.toFloat() ,
            onValueChange = { newValue ->
                state.value = newValue.roundToInt()
            },
            valueRange = 0F..5F,
            steps = 4,
        )
    }
}


## Coloreando que es gerundio

Podemos darle color a varios elementos, además de usar diferentes dependiendo el estado. Todo se define en la interfaz `SliderColors`:

SliderColors = DefaultSliderColors(
    thumbColor = thumbColor,
    disabledThumbColor = disabledThumbColor,
    activeTrackColor = activeTrackColor,
    inactiveTrackColor = inactiveTrackColor,
    disabledActiveTrackColor = disabledActiveTrackColor,
    disabledInactiveTrackColor = disabledInactiveTrackColor,
    activeTickColor = activeTickColor,
    inactiveTickColor = inactiveTickColor,
    disabledActiveTickColor = disabledActiveTickColor,
    disabledInactiveTickColor = disabledInactiveTickColor
)

| *Thumb* | |
| -------- | -------- |
| **Enable** | thumbColor |
| **Disable** | disableThumbColor |

| *Track* | Active | Inactive |
| -------- | -------- | -------- |
| **Enable** | activeTrackColor | inactiveTrackColor |
| **Disable** | disableActiveTrackColor | disabledInactiveTrackColor |

| *Tick* | Active | Inactive |
| -------- | -------- | -------- |
| **Enable** | activeTickColor | inactiveTrackColor |
| **Disable** | disableActiveTickColor | disabledInactiveTickColor |

Un ejemplo de uso de color siguiendo el ejemplo:

@Composable
fun ColouredRangeSliderExample() {
    Column {
        val state = remember { mutableStateOf(0) }
        Text(text = state.value.toString())
        Slider(
            value = state.value.toFloat(),
            onValueChange = { newValue ->
                state.value = newValue.roundToInt()
            },
            valueRange = 0F..5F,
            steps = 4,
            colors = SliderDefaults.colors(
                thumbColor = colorFromValue(state.value),
                activeTrackColor = colorFromValue(state.value)
            )
        )
    }
}

private fun colorFromValue(newValue: Int) = when (newValue) {
    1 -> Color.Green
    2 -> Color.Cyan
    3 -> Color.Blue
    4 -> Color.Yellow
    5 -> Color.Red
    else -> Color.Gray
}