Controle deslizante

O elemento combinável Slider permite que os usuários façam seleções em um intervalo de valores. Você pode usar um controle deslizante para permitir que o usuário faça o seguinte:

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

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

• Faixa: é a barra horizontal que representa o intervalo de valores que o controle deslizante pode assumir.
• Ponteiro: é um elemento de controle que pode ser arrastado no controle deslizante que permite ao usuário selecionar um valor específico dentro do intervalo definido pela faixa.
• Marcas de seleção: 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 Slider para ver a definição completa da API. Alguns dos principais parâmetros do elemento combinável Slider são os seguintes:

• 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. Isso 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 aparece da seguinte maneira:

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 seguintes parâmetros.

• 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 entalhes no controle deslizante em que o polegar 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 encaixa em 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 aparece da seguinte maneira:

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

Observação: o início e o fim de um controle deslizante são considerados "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: também é possível transmitir Slider um elemento combinável thumb e track para personalizar melhor a aparência do componente.

Controle deslizante de 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 faixa contínua.

@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