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
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.
