Slider
Slider. Drag the thumb; the arrows step it in gears — Shift coarse, Alt fine, held arrows accelerate. readout shows the value. Space on the focused thumb sweeps it; play adds the button.
Controls
Wolfram's Control family, one component per kind: a control is the element of its box, <slider-box> for Slider and VerticalSlider, <setter-bar-box> for SetterBar. Every control has a name, publishes a value, and fires notatio-control-change when it moves — so a <dynamic-module-box> or a <notatio-manipulate> binds any of them the same way, and a template that mentions _name follows. The controls that iterate a span (sliders, togglers, an animator) share the knob's gears, keyboard, play and loop.
Sliders
Animator and VerticalSlider
An Animator is a slider that plays by default and cycles; a VerticalSlider stands up and takes up/down.
source · editable
Slider2D
Slider2D: a point on a square. The binding is the list [x, y] — or a complex number with complex, so a knob's two axes and a pad's are the same thing.
source · editable
IntervalSlider
Two thumbs that cannot cross; the binding is [lo, hi].
source · editable
Choices
SetterBar and RadioButtonBar
One entry down. Entries are |-separated and may be value -> label; a value that looks like mathematics is typeset.
source · editable
TogglerBar and ListPicker
Any number down; the binding is the List of selected values. ListPicker shows the entries as a list, single allows one.
source · editable
Toggler, Checkbox
A Toggler with no entries is a switch between False and True; with entries it cycles them on click and opens them on a long press. A Checkbox binds True/False too.
source · editable
Others
Locator on a plot
A Locator is a point on the picture: drag it, and the binding is where it is in the plot's own coordinates.
source · editable
InputField and ColorSlider
An InputField binds whatever Epsil you type, on Enter; a ColorSlider binds RGBColor(r, g, b).
source · editable
In a Manipulate
ControlType
A parameter picks its control from its range — a slider, a short list a setter bar, a long one a popup menu — unless a trailing symbol names one, Wolfram's ControlType.
source · editable
As expressions
A control is a symbol, so an interface is an expression. The controls' variables are declared where the control is — Slider(k, (0, 5)), or Slider((k, 2), (0, 5)) to say where it starts — and read as wildcards everywhere else in the same expression, which <notatio-out> draws as a dynamic module. Row, Column, Grid, Panel and Labeled arrange; a string is text; anything else is a readout. An entry of a choice list may be Labeled(value, "label").
An interface as an expression
The same thing a cell could evaluate to, or the REPL could hold: no markup, just the symbols the engine knows.
source · editable
A panel of controls and a plot
source · editable
Every kind, in one grid
source · editable
Options
Options are Wolfram's: rules after the positional arguments, PlotRange -> (-1, 1), singly or in lists, the leftmost setting of a name winning. A plot is a <graphics-box> holding its expression, options and all; on a component that takes them as attributes they are plot-range, or the name the component already has, and one whose value is something to draw, like Epilog, is carried the same way, as the Epsil it was.
Options as rules, and as attributes
The expression and the element hold the same thing; Epilog marks the plot with a graphics primitive.
source · editable
Structure, not attributes
A built component can also be written the way its expression reads: the arguments as children, the options as attributes in Wolfram's names. The element lowers them itself — <notatio-plot> holding a <notatio-sin> and a <notatio-tuple> is Plot(Sin(x), (x, 0, 10)) — so a framework that hands the DOM an expression's tree needs to know nothing about the components. A head with a fixed signature takes its arguments by name too: <notatio-binomial n="5" k="2">.
A plot, structurally
source · editable
Named arguments
source · editable
As a vdom
The same trees, written structurally: every head a tag, every argument a child (a run of atoms as text, k 1), every option an attribute — structuralOf in the base package, and what an expression's component form is. The elements do the rest, lowering their own children; a layout (Row, Grid, …) is boxes, drawn as plain DOM around its entries.
The realized tree
source · editable
A plot with options, as a vdom
source · editable
As markup
The same form without the notatio- prefix is markup a page can hold: FullForm written as JSX, read at build and shown as its value. A head's tag in a sentence is inline, <ToExpression value="…" /> holds Epsil:
From a library
A published library's symbols are written the same way, by their qualified name. The page fetches enumeratio/library-template the first time an expression names one of its symbols, checks its examples, and declares it:
Every symbol, and no wrapper
Every head the engine knows is an element, notatio- plus its name: the ones that draw or control have components of their own, and the rest are generic — a <notatio-binomial> typesets Binomial(…), its arguments its children (or its value, the text the symbol's constructor takes). And the page is itself a scope: a control and a readout with no <dynamic-module-box> around them still find each other; the wrapper is for isolation, when two examples reuse a name.
Generic elements
No component was written for Binomial, Sqrt or Add. The outermost typesets; the ones inside are structure.
source · editable
The page as the scope
No tangle: the slider is named m nowhere else on this page, so the page scope binds it to the readout and to the generic element beside it.