Componentes
Slider
Faixa contínua de valor. Trilho wash preenchido pelo degradê Graffiti → Vivid Blue, polegar de papel. O número atual fica visível o tempo todo.
Exemplos#
Desconto de R$ 12,00 no total.
Usar pontos · o número formatado fica sempre à vista
Mesa
Celular · 390
Marcas no trilho e entrada exata ao lado
Importar#
import { Slider } from "@hiboupay/react";
import type { SliderProps } from "@hiboupay/react";Quando usar#
Use quando
- Quanto usar de um saldo: pontos, crédito, limite.
- Ajuste aproximado em que a pessoa reage ao resultado.
Não use quando
- Valor exato que a pessoa já sabe: Input.
- Poucas opções discretas: Radio ou ChoiceCard.
- Ligar e desligar: Switch.
Anatomia#
- 01Rótulo à esquerda e valor em azul à direita
- 02input range nativo com alvo de 40
- 03Trilho 6px com preenchimento até o valor
- 04Marcas de referência
- 05Polegar 16px de papel
- 06Input numérico opcional
- 07Legendas das pontas
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value* | number | Controlado. | |
| onValueChange | (value: number) => void | Novo valor a cada passo. | |
| min / max / step | number | 0 / 100 / 1 | Faixa e granularidade. |
| format | (value: number) => string | Como o número aparece. Padrão: pt-BR sem casas. | |
| minLabel / maxLabel | ReactNode | Legendas das pontas. | |
| marks | number[] | Traços de referência no trilho. | |
| input | boolean | false | Input numérico ao lado, mesma faixa e o mesmo valor. |
Acessibilidade#
Teclado
Leitor de tela
- —input range nativo: valor, mínimo e máximo anunciados. Rótulo associado por id.
Boas práticas#
Faça
- Mostre o valor formatado ao lado do rótulo.
- Deixe uma entrada exata por perto quando o valor importa no contrato.
Evite
- Slider como única forma de escolher valor de dinheiro.
- Faixa sem legenda de mínimo e máximo.
Conteúdo#
- —Rótulo diz o que o valor faz: "Usar pontos", não "Selecione".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Input
Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.
Estado
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Entrada
Switch
Liga ou desliga uma configuração. Trilho com raio da escala: apagado em papel com anel Graffiti, aceso em Vivid Blue com luz interna. Thumb de papel.