Controle deslizante

O elemento de composição Slider permite que os usuários selecionem um valor dentro de um intervalo. Você pode usar um controle deslizante para permitir que o usuário faça o seguinte:

• Ajuste as configurações que usam um intervalo de valores, como volume e brilho.
• Filtrar dados em um gráfico, como ao definir uma faixa de preço.
• Entrada do usuário, como definir uma classificação em uma avaliação.

O controle deslizante contém uma faixa, um botão, um rótulo de valor e marcas de escala:

• Faixa: é a barra horizontal que representa o intervalo de valores que o controle deslizante pode assumir.
• Botão: é um elemento de controle arrastável no controle deslizante que permite ao usuário selecionar um valor específico dentro do intervalo definido pela faixa.
• Marcas de escala: são marcadores ou indicadores visuais opcionais que aparecem ao longo da faixa do controle deslizante.

Figura 1. Uma implementação de um controle deslizante.

Implementação básica

Consulte a referência de Slider para uma definição completa da API. Alguns dos principais parâmetros do elemento combinável Slider são:

• value: o valor atual do controle deslizante.
• onValueChange: uma lambda que é chamada sempre que o valor é alterado.
• enabled: um valor booleano que indica se o usuário pode interagir com o controle deslizante.

O exemplo a seguir é um controle deslizante simples. Ele permite que o usuário selecione um valor de 0.0 a 1.0. Como o usuário pode selecionar qualquer valor nesse intervalo, o controle deslizante é contínuo.

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

Essa implementação é mostrada abaixo:

Figura 2. Uma implementação básica de um controle deslizante.

Implementação avançada

Ao implementar um controle deslizante mais complexo, você também pode usar os parâmetros a seguir.

• colors: uma instância de SliderColors que permite controlar as cores do controle deslizante.
• valueRange: o intervalo de valores que o controle deslizante pode assumir.
• steps: o número de marcações no controle deslizante em que o botão se encaixa.

O snippet a seguir implementa um controle deslizante com três etapas, com um intervalo de 0.0 a 50.0. Como o polegar se ajusta a cada etapa, esse controle deslizante é 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

A implementação é mostrada abaixo:

Figura 3. Um controle deslizante com etapas e um intervalo de valores definido.

Observação: o início e o fim de um controle deslizante contam como "etapas". No exemplo anterior, em que o intervalo é 0f..50f e o número de steps é 3, cada intervalo ao longo do intervalo é 12.5, porque o início e o fim do controle deslizante também são intervalos que o usuário pode selecionar.

Observação: você também pode transmitir Slider para um elemento combinável thumb e track para personalizar mais detalhadamente a aparência do componente.

Controle deslizante do intervalo

Também é possível usar o elemento combinável RangeSlider dedicado. Isso permite que o usuário selecione dois valores. Isso pode ser útil em casos como quando o usuário quer selecionar um preço mínimo e máximo.

O exemplo a seguir é relativamente simples de um controle deslizante de intervalo contínuo.

@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. Uma implementação de um controle deslizante de intervalo.

Outros recursos

• Documentação da interface do Material