ElementPicker
<notatio-element-picker template="SymmetricGroup({size})" size-max="8" glyph="permutation"> -- pick one element of a carrier: a size stepper, then a rank slider over the collection at that size, and the element it lands on drawn as its glyph and as text. The element is At(collection(size), rank), asked of the page's kernel; the rank runs from 1 to the collection's count. Nothing is announced until the reader moves a control: then notatio-element-pick carries the element, and the host decides what to do with it. Both controls are keyboard operable (arrows step, Home and End on the slider go to its ends), and the slider's aria-valuetext is the element.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
template | string | "" | The collection with its size as {size}: SymmetricGroup({size}). |
carrier | string | "" | What the elements are, for the labels: Permutation. |
glyph | string | "" | The glyph kind that draws an element: permutation, partition, dyck, … Empty for none. |
size | number | 4 | The size shown.reflects |
sizeMin attribute size-min | number | 1 | The smallest size offered. |
sizeMax attribute size-max | number | 6 | The largest size offered. |
rank | number | 1 | The rank (1-based) of the element in the collection at size.reflects |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <notatio-element-picker> 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.
Settable only as a JS property, not an attribute -- evaluate: bind with :evaluate.prop="…" directly on the tag.