# Pingado

Uma barra que se divide em duas partes coloridas, com a porcentagem de cada lado, como café e leite na xícara.

> Pingado é um componente do THM Componentes para escolher a proporção entre duas coisas, como café e leite. Uma barra se divide em duas partes coloridas, e os rótulos mostram a porcentagem de cada lado, somando 100%. Perto das pontas, os rótulos sobem com um pequeno quique. Por baixo, um input range nativo aceita teclado e toque.

- Categoria: Formulários e entrada
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4
- Interação: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/pingado/

## Como ele é

Imagine uma xícara em que você escolhe quanto é café e quanto é leite. A barra se divide em duas partes, com uma fresta e uma linha fina no ponto de divisão: à esquerda, um laranja translúcido; à direita, um branco translúcido. Rótulos em fonte monoespaçada e negrito mostram o nome e a porcentagem de cada lado, como 50% e 50%. Com a divisão perto do meio, os rótulos ficam dentro das barras, que ocupam toda a altura; perto das pontas, as barras encolhem para baixo e os rótulos sobem, com um pequeno quique. A linha central fica mais forte ao passar o mouse ou focar.

## Você pode estar procurando isto se pediu algo assim

- “barra para escolher a proporção entre duas coisas”
- “slider que mostra a porcentagem de cada lado, tipo 70 e 30”
- “controle para dividir o orçamento entre duas opções”
- “escolher quanto de café e quanto de leite, só que no site”
- “slider de preferência entre dois extremos no questionário”
- “controle deslizante bonito para simulador de investimento”

## Também chamado de

divisor de porcentagem, split slider, slider de proporção, range slider, controle deslizante, ratio slider, slider de equilíbrio

## Quando usar

- Simuladores de proporção, como renda fixa e variável ou trabalho e lazer
- Orçamentos e divisões de verba entre duas categorias
- Questionários de preferência entre dois extremos
- Configuradores de produto que misturam dois ingredientes ou sabores

## Quando evitar

- Escolhas com mais de duas partes, que pedem outro controle
- Formulários que precisam do valor, se a IA não acrescentar um v-model, porque o original não emite o número

## Como pedir para a sua IA

```text
Crie um slider de proporção entre duas opções no simulador: barra dividida nas cores da minha marca, rótulos com a porcentagem de cada lado, v-model com o valor, rótulo acessível para leitor de tela e versão sem animação para movimento reduzido.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Pingado

### Como pego o valor escolhido em Pingado?

No original, Pingado guarda o valor só por dentro e não emite eventos. Para usar o número num cálculo ou formulário, peça à IA para expor um v-model ou um evento de mudança; o valor vai de 0 a 100, e o lado direito é sempre 100 menos esse número.

### Pingado funciona com teclado e no celular?

Funciona. Por baixo do visual, Pingado é um input range nativo invisível, que responde às setas do teclado e ao arrasto do dedo. Os rótulos ficam escondidos dos leitores de tela, então vale dar ao campo um nome acessível; o prompt do THM Componentes pede teste em mobile.

### Dá para trocar os textos e as cores de Pingado?

Dá. Pingado recebe os textos pelas props leftContent e rightContent, que no padrão são LEFT e RIGHT e na demo viram COFFEE e MILK, e as cores em hexadecimal por leftColor, rightColor e indicatorColor. O prompt orienta a IA a trocar as cores fixas pelos tokens do seu projeto.

## Componentes relacionados

- [Estilingue](https://vibecode.thmtecnologia.com/componentes/estilingue/): Barra de ajuste em que o trilho estica como elástico quando você puxa além do fim e volta balançando.
- [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar.
- [Guache](https://vibecode.thmtecnologia.com/componentes/guache/): Um botão que abre um painel para escolher cor no quadro de tons, digitar em HEX, RGB ou HSL e conferir o contraste.
- [Manômetro](https://vibecode.thmtecnologia.com/componentes/manometro/): Medidores em arco com faixas verde, âmbar e vermelha, ponteiro que balança até parar e número contando.
- [Transferidor](https://vibecode.thmtecnologia.com/componentes/transferidor/): Um anel que se preenche com animação até a porcentagem da meta, com o número no centro.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.