Slider

• Ajustar um valor dentro de uma faixa conhecida: quando o usuário se move entre um mínimo e um máximo definidos e pode se aproximar do valor desejado sem precisar digitá-lo. Ex.: "Raio de entrega em quilômetros", "Volume das notificações".
• Filtrar por um intervalo de valores: usar a variante Range para definir um mínimo e um máximo ao mesmo tempo, com um único controle. Ex.: "Preço: R$0 - R$5.000".
• Priorizar a velocidade de seleção em vez da precisão exata: quando basta se aproximar do valor desejado e não é necessário um número exato. Ex.: ajustar o brilho ou o volume.
• Simplificar a entrada em telas touch: evitar o teclado numérico em ajustes frequentes e aproximados, nos quais arrastar é mais direto do que digitar.

• Inserir um valor exato: quando o usuário precisa digitar um número preciso em vez de se aproximar arrastando um controle. Usar Input nesse caso. Ex.: "Preço de tabela", "Número de documento".
• Escolher entre duas opções excludentes: uma decisão binária não precisa de um percurso de valores intermediários. Usar Toggle ou Checkbox nesse caso.
• Escolher entre poucas opções discretas com nome próprio: quando os valores não formam uma escala contínua, e sim um conjunto reduzido de opções com nome. Usar Radio nesse caso. Ex.: tamanhos "P", "M", "G".
• Mostrar um progresso não interativo: quando o usuário não controla o valor e só é necessário comunicar um avanço. Usar Progress Bar nesse caso.

1. Track base: faixa que representa a totalidade dos valores disponíveis, entre min e max.
2. Active track: porção da faixa que indica visualmente o valor ou o intervalo selecionado; sua cor muda de acordo com a prop appearance.
3. Thumb: controle que o usuário arrasta, clica ou navega com o teclado para alterar o valor. No modo Single há um único Thumb; no Range há dois, um em cada extremo do intervalo. Sua borda sempre fica na cor primary, independentemente do appearance escolhido para o Active track.

O Slider aparece em formulários e painéis de configuração nos quais o usuário ajusta um valor ou um intervalo dentro de uma faixa conhecida, como filtros de busca, configurações de entrega ou preferências da loja. Como o componente não exibe por si só nem um rótulo nem o valor atual, ele sempre convive com um Label ou Text que identifica o que está sendo ajustado e com um Text que exibe o valor selecionado.

• Navegação por teclado: o Thumb é renderizado como um button nativo focável; ArrowRight/ArrowUp aumenta o valor e ArrowLeft/ArrowDown o diminui de acordo com step, enquanto Home leva ao mínimo e End ao máximo.
• Atributos ARIA: cada Thumb expõe role="slider" com aria-valuemin, aria-valuemax e aria-valuenow, além de um aria-label que por padrão fica em inglês ("Value", "Minimum value", "Maximum value"). Passar sempre ariaLabel (ou minAriaLabel/maxAriaLabel no Range) no idioma da interface.
• Foco visível: ao navegar com o teclado, o Thumb exibe o anel de foco padrão do Nimbus em torno do controle.
• Estado disabled: o atributo disabled bloqueia a interação por mouse, touch e teclado, e atenua a cor do Thumb e do Active track.
• Valor que reforça a mensagem sem depender só da cor: a cor do Active track (definida por appearance) reforça visualmente o valor selecionado, mas como o Slider não exibe o número por si só, convém sempre acompanhá-lo de um Text que exiba o valor atual em vez de depender unicamente da posição do Thumb.

Instale o componente via terminal.

As propriedades adicionais são passadas para o elemento <Slider>. Consulte a documentação de atributos do elemento input para ver a lista equivalente de atributos nativos.

• Input — Para entrada de valores numéricos exatos, quando não admite aproximação.
• Toggle — Para uma decisão binária, sem percurso de valores intermediários.
• Radio — Para escolher entre poucas opções discretas com nome próprio.
• Progress Bar — Para mostrar um progresso não interativo, sem controle do usuário.

Slider