Controle deslizante

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

  • Ajustar configurações que usam um intervalo 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 indicador, um rótulo de valor e marcas de escala:

  • Faixa: a faixa é a barra horizontal que representa o intervalo de valores que o controle deslizante pode assumir.
  • Indicador: o indicador é 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.
Um controle deslizante com polegar, faixa e marcações.
Figura 1. Uma implementação de um controle deslizante.

Implementação básica

Consulte a Slider referência para uma 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. 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())
    }
}

Esta implementação aparece da seguinte maneira:

Um componente de controle deslizante com um valor selecionado em aproximadamente três quartos do caminho.
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 ao qual o indicador se ajusta.

O snippet a seguir implementa um controle deslizante com três etapas e um intervalo de 0.0 a 50.0. Como o indicador 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())
    }
}

A implementação aparece da seguinte maneira:

Um controle deslizante individual com um intervalo de 0 a 50, mostrando cinco marcações em intervalos iguais. O polegar fica posicionado perto da segunda marca de tique, indicando um valor selecionado de 16.
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 é um exemplo 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())
    }
}

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

Outros recursos