Animator
<Animator name="t" min="0" max="6.28" step="0.05"> -- Wolfram's Animator: a <Slider> that plays. The play button and the readout are on by default and the sweep cycles unless told otherwise -- an animator's job is to run, not to stop at the end. Hold the button for the speed and loop.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
name | string | "" | The binding this slider drives: name="a" fills the wildcard _a.reflects |
value | string | "0" | The starting value. |
min | number | Number.NaN | Lowest value. Defaults to a symmetric range around the start. |
max | number | Number.NaN | Highest value. |
step | number | Number.NaN | How much one step moves the value; also fixes the printed places. |
axis | "x" | "y" | "x" | x (default) lies flat; y stands the slider up.reflects |
readout | boolean | false | Show the value beside the track.reflects |
play | boolean | false | Show a play/pause button. Space on the focused thumb toggles playback regardless.reflects |
autoplay | boolean | false | Sweep while scrolled into view; pause when scrolled out. |
interval | number | Number.NaN | Milliseconds per playback step. Defaults to a whole sweep in a few seconds. |
rate | number | rate),
interval: () => {
if (Number.isFinite(this.interval) && this.interval > 0) return this.interval | Playback speed as a multiplier on interval.reflects |
loop | Loop | "" | loop),
rate: () => (Number.isFinite(this.rate) && this.rate > 0 ? this.rate : 1),
setRate: (rate) => (this.rate = rate),
interval: () => {
if (Number.isFinite(this.interval) && this.interval > 0) return this.interval | What an iteration does at the ends: cycle, reflect or none (default).reflects |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <animator-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.