<notatio-slider>
<notatio-slider name="k" value="1" min="0" max="5" step="0.5"> -- a track with a thumb, Wolfram's Slider. Drag the thumb or click the track to set it; the arrows step it, accelerating when held, Shift or PageUp/PageDown step coarse and Alt fine (the same gears as a <notatio-knob>), Home/End go to the ends. readout shows the value beside the track; axis="y" stands it up (Wolfram's VerticalSlider, which is also <notatio-vertical-slider>).
With no min/max the range is inferred from the value the way a knob's is, and a value written without a point steps by whole numbers. play adds a button that sweeps the range (Space does the same when the thumb is focused), autoplay sweeps while on screen, loop says what the ends do (none by default: a range has ends), interval and rate set the pace, and holding the button opens the speed-and-loop panel. Inside a scope the binding _k is the number.
Stories in the playground·packages/notatio-lit/src/notatio-slider.ts· in Vue: <Slider>
Attributes
| Attribute | 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 |