Workshop Kit · widget reference

Shipped

before-after-slider

A single-handle reveal slider for "before vs after" comparisons. The 'after' content sits underneath; the 'before' content sits on top, clipped to a draggable percentage of the container. Drag the handle, or arrow-key it, to wipe between the two. Used for "what good looks like" framings throughout the bootcamp.

Live demo

Two stages — a copy comparison (horizontal split) and a photo comparison (vertical split). Drag the handle, click anywhere in the frame to jump, or tab in and arrow-key it. Shift+arrow = 25% jumps. Home/End jump to the extremes.

Horizontal split · copy comparison

Vertical split · photo comparison (CSS-only stand-in for the L9b shot pair)

Contract

Drop a <section> with the inline JSON config; the widget renders the wipe automatically. No data attributes beyond data-widget. Viewer-only — no writes to MuntinContext.

Field	Type	Purpose
`before.html`Required	HTML string	What renders on top, clipped by the handle position. Rendered as-is — lesson author owns the safety of body content.
`after.html`Required	HTML string	What renders underneath, fully visible. Same authoring contract as before.html.
`before.label` / `after.label`	string	Labels rendered above the slider so a sighted user knows which side is which without dragging. Defaults: "Before" / "After" (EN), "Antes" / "Después" (ES). Each takes an optional `-es` sibling for Spanish copy.
`axis`	`"horizontal"` \| `"vertical"`	Default `"horizontal"`. Vertical splits top/bottom (useful when comparing tall content like a photo).
`initialPosition`	number 0..1	Default 0.5 (handle starts centered). Set to 0.3 to start showing more of 'after,' or 0.7 to start showing more of 'before.'

Markup

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

The handle is a role="slider" button with aria-valuemin=0, aria-valuemax=100, aria-valuenow updating on every move, and an aria-valuetext announcing "70% Before, 30% After" in plain language so screen reader users hear the position, not just the number.
Arrow keys move the handle 5% per press; Shift+arrow 25%; Home/End jump to 0/100.
Click-to-jump on the frame itself — the slider isn't the only target for touch users who'd rather tap than drag a small handle.
Labels render visibly above the slider so a sighted user knows which side is which without first interacting.
Respects prefers-reduced-motion — no animated handle transitions for users who set the OS flag.

Where it ships

Lessons currently substitute tab-flip for the same comparison framing; before-after-slider is the upgrade. Author the inline JSON config in the lesson, swap data-widget, and the slider takes over.

Source

/tools/_shared/workshop/before-after-slider.js — ~190 LOC. Exports { tag, contextKeys, mount, serialize } per the Workshop Kit widget contract. Uses CSS clip-path: inset(...) to do the reveal — no canvas, no SVG mask, no third-party slider library. Pointer events (down/move/up + capture) drive the drag; keyboard handler covers arrows + Shift + Home/End. contextKeys is empty — viewer-only widget.

← Back to the Workshop Kit