Workshop Kit · referencia del widget

Publicado

before-after-slider

Un control de revelado con un solo mango para comparaciones "antes vs después." El contenido 'después' se sienta debajo; el contenido 'antes' se sienta arriba, recortado a un porcentaje arrastrable del contenedor. Arrastra el mango, o muévelo con flechas, para barrer entre los dos. Se usa para encuadres de "cómo se ve lo bueno" a lo largo del bootcamp.

Demo en vivo

Dos escenarios — una comparación de copy (división horizontal) y una comparación de fotos (división vertical). Arrastra el mango, haz clic en cualquier parte del marco para saltar, o entra con Tab y usa las flechas. Shift+flecha = saltos del 25%. Home/End saltan a los extremos.

División horizontal · comparación de copy

División vertical · comparación de fotos (sustituto CSS para el par de tomas de L9b)

Contrato

Deja caer una <section> con la configuración JSON en línea; el widget renderiza el barrido automáticamente. Sin atributos data más allá de data-widget. Solo lectura — sin escrituras a MuntinContext.

Campo	Tipo	Propósito
`before.html`Requerido	cadena HTML	Lo que se renderiza arriba, recortado por la posición del mango. Se renderiza tal cual — el autor de la lección controla la seguridad del contenido.
`after.html`Requerido	cadena HTML	Lo que se renderiza debajo, totalmente visible. Mismo contrato de autoría que before.html.
`before.label` / `after.label`	cadena	Etiquetas renderizadas encima del control para que un usuario con vista sepa qué lado es cuál sin arrastrar. Defaults: "Before" / "After" (EN), "Antes" / "Después" (ES). Cada uno toma un hermano opcional `-es` para la copia en español.
`axis`	`"horizontal"` \| `"vertical"`	Default `"horizontal"`. Vertical divide arriba/abajo (útil al comparar contenido alto como una foto).
`initialPosition`	número 0..1	Default 0.5 (mango empieza centrado). Pon 0.3 para empezar mostrando más de 'después,' o 0.7 para empezar mostrando más de 'antes.'

Marcado

<section class="course-widget" data-widget="before-after-slider"> <script type="application/json" class="before-after-config"> { "before": {"label":"Vague","label-es":"Vago","html":"<p>…</p>"}, "after": {"label":"Specific","label-es":"Específico","html":"<p>…</p>"}, "axis": "horizontal", "initialPosition": 0.5 } </script> </section>

El mango es un botón role="slider" con aria-valuemin=0, aria-valuemax=100, aria-valuenow actualizándose con cada movimiento, y un aria-valuetext anunciando "70% Antes, 30% Después" en lenguaje claro para que los lectores de pantalla escuchen la posición, no solo el número.
Las flechas mueven el mango 5% por presión; Shift+flecha 25%; Home/End saltan a 0/100.
Click-para-saltar en el marco mismo — el mango no es el único blanco para los usuarios de tacto que prefieren tocar a arrastrar un control pequeño.
Las etiquetas se renderizan visiblemente encima del control para que un usuario con vista sepa qué lado es cuál sin interactuar primero.
Respeta prefers-reduced-motion — sin transiciones animadas del mango para usuarios que ajustan la bandera del SO.

Dónde se publica

Las lecciones actualmente sustituyen tab-flip para el mismo encuadre de comparación; before-after-slider es la mejora. Escribe la configuración JSON en línea en la lección, cambia data-widget, y el slider toma el control.

Código fuente

/tools/_shared/workshop/before-after-slider.js — ~190 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Usa clip-path: inset(...) de CSS para hacer el revelado — sin canvas, sin máscara SVG, sin librería de slider de terceros. Los eventos pointer (down/move/up + capture) manejan el arrastre; el manejador de teclado cubre flechas + Shift + Home/End. contextKeys está vacío — widget solo de lectura.

← Volver al Workshop Kit