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 Retoque
Retoque funciona no celular?
Funciona. Retoque 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 em Retoque?
Pode. Além das props de imagem, Retoque 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.
Dá para usar Retoque pelo teclado?
Não como vem. Retoque 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.
