Slider2D
<Slider2D name="p" value="0.5,0.5" min="0,0" max="1,1"> -- a square with a dot you drag about it, Wolfram's Slider2D. min/max are x,y pairs (default the unit square), step one step for both axes or dx,dy. The arrows nudge the dot in the same gears as a knob (Shift coarse, Alt fine, held arrows accelerate).
Inside a scope the binding _p is the List [x, y] -- or, with complex, the complex number x + y i, so a knob's two axes and a pad's are the same thing.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | "" | The binding this pad drives: name="p" fills the wildcard _p.reflects |
value | string | "0,0" | The starting point, x,y -- or a+bi with complex. |
min | string | "0,0" | The lower-left corner, x,y. |
max | string | "1,1" | The upper-right corner, x,y. |
step | string | "" | One step for both axes, or dx,dy. |
complex | boolean | false | Bind a complex number x + y i rather than a list.reflects |
readout | boolean | false | Show the point's coordinates beside the pad.reflects |
size | number | 120 | The pad's side, in CSS pixels. |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <slider-2d-box> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.