Controle deslizante

O elemento combinável Slider permite que os usuários façam seleções em um intervalo de valores. Use 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.
  • Filtre os dados em um gráfico, como ao definir uma faixa de preço.
  • Entrada do usuário, como definir uma nota em uma avaliação.

O controle deslizante contém uma faixa, um círculo, 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 definir.
  • Miniatura: o círculo é um elemento de controle arrastável no controle deslizante que permite que o usuário selecione 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.
Um controle deslizante com o polegar, a faixa e as marcas de seleção.
Figura 1. Uma implementação de um controle deslizante.

Implementação básica

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

  • value: o valor atual do controle deslizante.
  • onValueChange: uma lambda que é chamada sempre que o valor muda.
  • 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 forma:

Um componente de controle deslizante com um valor selecionado aproximadamente três quartos ao longo da faixa.
Figura 2. Uma implementação básica de um controle deslizante.

Implementação avançada

Ao implementar um controle deslizante mais complexo, também é possível 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 entalhes no controle deslizante em que o polegar é direcionado.

O snippet a seguir implementa um controle deslizante que tem 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 aparece da seguinte forma:

Escreva o texto alternativo aqui
Figura 3. Um controle deslizante com etapas e um intervalo de valores definido.

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

Um componente do controle deslizante de intervalo com dois valores selecionados. Um rótulo exibe os limites superior e inferior da seleção.
Figura 4. Uma implementação de um controle deslizante de intervalo.

Outros recursos