Como ele é
Funciona como duas fotos impressas, uma sobre a outra, com uma cortina vertical que você puxa para os lados. À esquerda da linha aparece a primeira versão; à direita, a segunda. A linha tem um brilho anil que some nas pontas, um halo azul-claro de um lado e uma poeira de estrelinhas brancas piscando ao lado, com uma alça branca pequena no meio. No modo padrão, a linha segue o mouse e volta ao centro quando ele sai; no modo arrastar, é preciso clicar e puxar. No automático, a linha vai de uma ponta à outra em cinco segundos e volta, e para quando o mouse entra.
Você pode estar procurando isto se pediu algo assim
- comparar antes e depois arrastando uma linha no meio da foto
- mostrar o resultado do tratamento com a foto de antes e depois
- imagem que muda quando passo o mouse de um lado para o outro
- comparar o site antigo com o novo na mesma tela
- aquele slider de antes e depois que clínicas usam
- mostrar a versão clara e a escura do meu app no mesmo quadro
- comparar dois trechos de código com uma divisória que desliza
Também chamado de
- antes e depois
- before and after slider
- comparador de imagens
- image comparison slider
- slider de comparação
- compare slider
- divisória deslizante
Quando usar
- Resultados de tratamentos estéticos, odontológicos ou de reforma
- Redesign de site ou de app, mostrando a versão antiga e a nova
- Tema claro e escuro do mesmo produto
- Edição de foto, filtro ou restauração de imagem
- Mudanças de código, com a versão anterior e a corrigida
Quando evitar
- Comparações que precisam funcionar pelo teclado, já que a linha só se move com mouse ou toque
- Imagens com proporções ou enquadramentos diferentes, que desalinham na divisória
Como pedir para a sua IA
Crie um comparador de antes e depois para os resultados de tratamento: duas fotos sobrepostas e uma linha que a pessoa arrasta com o mouse ou o dedo, com controle pelas setas do teclado, cores da minha marca na linha, imagens otimizadas e versão sem brilho animado 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 Compare
O Compare funciona no celular?
Funciona. O Compare escuta eventos de toque, então a linha acompanha o dedo ao deslizar sobre a imagem, tanto no modo hover quanto no modo arrastar. Com o modo automático ligado, o toque é ignorado e a linha segue varrendo sozinha. O tamanho padrão é 400 por 400 pixels, então ajuste as classes para telas estreitas.
Posso comparar outra coisa além de imagens no Compare?
Pode. Além das props de imagem, o Compare tem os slots first-content e second-content, que recebem qualquer conteúdo com a largura e a altura do componente, como telas do app, trechos de código ou blocos coloridos. O slot handle troca a alça do meio por uma sua.
O Compare pode ser usado pelo teclado?
Não como vem. O Compare não recebe foco nem responde às setas, então quem navega sem mouse não consegue mover a linha. Peça à IA um controle por teclado, como um input range escondido ou um role slider com aria-valuenow, ligado à mesma porcentagem que o componente já emite.
