O elemento combinável Slider
permite que os usuários façam seleções em uma variedade de
e a distribuição dos valores dos dados. 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:
- Trilha: é a barra horizontal que representa o intervalo de valores que o controle deslizante pode assumir.
- Polegar: o polegar é um elemento de controle arrastável no controle deslizante que permite que o usuário selecione um valor específico dentro do intervalo definido pelo trilhos.
- Marcas de seleção: são marcadores ou indicadores visuais opcionais que aparecem ao longo da faixa do controle deslizante.
![Um controle deslizante com polegar, faixa e marcas de seleção.](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=9&hl=pt)
Implementação básica
Consulte a referência Slider
para uma definição completa da API. Alguns dos principais
Os parâmetros para o elemento combinável Slider
são os seguintes:
value
: o valor atual do controle deslizante.onValueChange
: uma lambda que é chamada sempre que o valor é mudou.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 em
esse intervalo, o controle deslizante será 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:
![Um componente do controle deslizante com um valor selecionado aproximadamente três quartos ao longo da faixa.](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=9&hl=pt)
Implementação avançada
Ao implementar um controle deslizante mais complexo, você também pode usar o parâmetros a seguir.
colors
: uma instância deSliderColors
que permite controlar o 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, este controle deslizante é
discretos.
@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:
![Escreva seu texto alternativo aqui](https://developer.android.com/static/develop/ui/compose/images/components/slider-advanced.png?authuser=9&hl=pt)
Controle deslizante de intervalo
Você também pode usar o elemento RangeSlider
combinável. Isso permite que o usuário
selecionar dois valores. Isso pode ser útil em casos como quando o usuário deseja
selecione um preço mínimo e máximo.
O exemplo a seguir é relativamente simples controle deslizante de intervalo.
@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 do controle deslizante de intervalo com dois valores selecionados. Um rótulo exibe os limites superior e inferior da seleção.](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=9&hl=pt)
Outros recursos
- Documentos sobre a interface do Material Design (link em inglês)