This post demonstrates the slider-driven layout. It uses the same basic essay pattern as the scroll template, but each visual updates from a local range control instead of page scroll position.

Scrubbable diagrams

Use the slider layout when the reader should directly control a parameter. The include creates the figure, range input, caption, and SVG canvas.

The scene receives a normalized progress value from 0 to 1, so page-specific scripts can focus on drawing instead of input plumbing.

The curve updates continuously as the slider moves.

Parameter sweeps

A slider is useful when the essay compares thresholds, blends, weights, or time steps. Keep the prose in Markdown and register the scene with SliderDraw.register(name, scene).

For a custom essay, add slider_script: /assets/js/my-essay-slider-scenes.js in front matter.

The selected bars change as the threshold moves.