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 diversos 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 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 assumir.
- Thumb: o círculo é um elemento de controle arrastável no controle deslizante. Ele 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.
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:
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()) } }
Essa implementação aparece da seguinte maneira:
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 deSliderColors
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 polegar é ajustado.
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()) } }
A implementação é exibida da seguinte forma:
Controle deslizante de intervalo
Você também pode usar o elemento RangeSlider
combinável. 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 mostra 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()) } }
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)