Workshop Kit · widget reference

Shipped

voice-slider

Three sliders that capture the operator's brand voice — formality (formal ↔ casual), era (classic ↔ modern), warmth (terse ↔ warm). Each track carries a pre-authored sample sentence at both extremes so the operator can hear what each position sounds like before committing. Writes voice: { formality, era, warmth } to MuntinContext.

Live demo

Drag each slider. The sample sentence below shifts to the extreme the position is closer to. The polite live region announces "Voice formality: 70% — <sample>" so screen-reader users hear the meaning, not just the number.

Three axes with restaurant-domain samples

Current MuntinContext.voice Drag a slider above…

Contract

No data attributes beyond data-widget. The axes are fixed (formality / era / warmth); the per-axis sample sentences are required and lesson-authored — the right examples depend on the lesson's framing.

Field	Type	Purpose
`samples.formality.low`Required	string	Sample sentence at the formal extreme of the formality axis.
`samples.formality.high`Required	string	Sample sentence at the casual extreme of the formality axis.
`samples.era.low` / `samples.era.high`Required	string	Sample sentences at the classic / modern extremes.
`samples.warmth.low` / `samples.warmth.high`Required	string	Sample sentences at the terse / warm extremes.
All sample fields	`-es` variants	Each sample field takes an optional `-es` sibling (e.g., `samples.formality.low-es`) for Spanish copy. The widget picks based on `<html lang>` or `data-locale`.

What it writes: voice: { formality: 0-100, era: 0-100, warmth: 0-100 } to MuntinContext on every input event. The L14 generator + future Method-built products can read this to retype CTAs, voicemail scripts, and review-response templates to match the operator's voice. The sync layer (assets/js/course-config-sync.js) includes voice in its allowlisted keys so signed-in operators get cross-device parity.

Markup

<section class="course-widget" data-widget="voice-slider"> <script type="application/json" class="voice-slider-config"> { "samples": { "formality": {"low":"…formal copy…","high":"…casual copy…", "low-es":"…copia formal…","high-es":"…copia casual…"}, "era": {"low":"…classic…","high":"…modern…", "low-es":"…clásico…","high-es":"…moderno…"}, "warmth": {"low":"…terse…","high":"…warm…", "low-es":"…conciso…","high-es":"…cálido…"} } } </script> </section>

Each slider is a native <input type="range"> — full keyboard support (arrow keys 1%, PageUp/Down 10%, Home/End 0/100) comes from the browser.
aria-labelledby points at the axis label, which carries both endpoint names ("Formal ↔ Casual") so the screen reader announces the slider in context.
Polite live region below the three axes announces "Voice formality: 70% — <sample>" so AT users hear the position AND what voice that position carries.
Endpoint labels render in color-coded ticks (rust for the 'low' end, green for the 'high' end) so sighted users see direction without dragging.

Where it ships

L7 — Palette + voice (companion to palette-picker; mounts alongside it)m2-decide/palette-voice

L13 (reviews) and L16 (rhythm) read voice via context to suggest tone-matched defaults for the response template and the rhythm reminder copy — the upgrade path lands in a future commit.

Source

/tools/_shared/workshop/voice-slider.js — ~150 LOC. Exports { tag, contextKeys, mount, serialize } per the Workshop Kit widget contract. Three native range inputs; lesson author provides the per-axis sample sentences; widget commits a flat voice: { formality, era, warmth } object on every input event.

contextKeys lists 'voice' so the engine's tree-shaking + dependency tracking recognizes the write. src/lib/course.js CONFIG_ALLOWED_KEYS + assets/js/course-config-sync.js ALLOWED were updated in the same commit so the snapshot picks up voice for the cross-device sync.

← Back to the Workshop Kit