Skip to content

Pay-for-what-you-use interactions

Interactions

A range slider, drag-to-reorder, and a carousel — all declared in Markdown. The slider is compile-time (zero JavaScript). :sortable and :carousel each load one tiny module from /__wd/behaviors/, only on this page.

Slider

Volume: 60 / 100

:slider renders a bound range input. Range values coerce to a Number, so { volume } and any :computed math see 60, not "60".

Drag to reorder

Sketch the idea

Draft the page

Review with the team

Ship it

Drag a row to reorder, or focus one and press ↑ / ↓. The order is rewritten on the underlying :store through window.wd, so the keyed loop repaints.