Skip to content

<notatio-vertical-slider>

<notatio-vertical-slider name="k" min="0" max="1"> -- Wolfram's VerticalSlider: a <notatio-slider> standing up, with up/down as its arrows. Everything else -- range, gears, readout, play, loop -- is the slider's.

Stories in the playground·packages/notatio-lit/src/notatio-vertical-slider.ts· in Vue: <VerticalSlider>

Attributes

AttributeTypeDefaultNotes
namestring""The binding this slider drives: name="a" fills the wildcard _a.reflects
valuestring"0"The starting value.
minnumberNumber.NaNLowest value. Defaults to a symmetric range around the start.
maxnumberNumber.NaNHighest value.
stepnumberNumber.NaNHow 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
readoutbooleanfalseShow the value beside the track.reflects
playbooleanfalseShow a play/pause button. Space on the focused thumb toggles playback regardless.reflects
autoplaybooleanfalseSweep while scrolled into view; pause when scrolled out.
intervalnumberNumber.NaNMilliseconds per playback step. Defaults to a whole sweep in a few seconds.
ratenumberrate), interval: () => { if (Number.isFinite(this.interval) && this.interval > 0) return this.intervalPlayback speed as a multiplier on interval.reflects
loopLoop | ""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.intervalWhat an iteration does at the ends: cycle, reflect or none (default).reflects