slider

A control that declares a parameter and gives the reader a track to move it along, as a row in the scene's footer.

sliderNodeExplained in Controls
On this page
A sine wave with two sliders beneath the plot, amplitude at 2 and frequency at 1.A sine wave with two sliders beneath the plot, amplitude at 2 and frequency at 1.

#Attributes

parameterRequiredImplicit
The parameter the control declares — slider:a — which is the scene's from then on, wherever the control is written. One control declares a parameter: a second for the same name in the scene is refused. An expression reads a parameter by its letter, so a parameter an expression uses is one letter; a word such as country is read in maths as a product of letters, and names a parameter no expression reads.
parameter-name
Also written: varCan be written as shorthand: slider:value
name
The row's label in the footer, in place of the parameter's letter. Rich text, so Frequency $b$ sets its own maths.
rich-text
Also written: label
column
A dataset column to take the stops from: column: #pop.year. A column of numbers gives its distinct values in ascending order as the stops, and the smallest and largest as the range; range: is not read. A column of text gives its distinct names, in the order the rows first give them. A mark's slice: on the same column draws the rows at the parameter's value.
reference
format
How the value reads in the footer. numbers; dates, a year with its fraction read as a date; months, 1 to 12 read Jan to Dec; weekdays, 1 to 7 read Mon to Sun; hours, hours from midnight read as a clock time; weeks, a year with its fraction read as a year and week; names, the data's own words. Every format but names keeps a number line, so range: and step: stay numbers. auto takes the format from the column:, and is numbers without one; a written format is used instead of the column's.
autonumbersdatesmonthsweekdayshoursweeksnames
Defaultauto
range
The ends, [start, end]. An end may be a constant expression: [0, 2pi]. Not read where column: or options: gives the stops.
parametised-interval
Default[-10, 10]
step
The distance between stops on the reader's track. Absent, 1 — or, under column:, the smallest gap between two of the column's values.
number
default
The starting value, held inside the range. Absent, 0 — or, where column: or options: gives the stops, the first of them. Where the stops are names it is an index among them, counted from 0.
number
Also written: start
hiddenAnimatable
Leaves the control's row out of the footer.
boolean
Defaultfalse
lock
Has no effect on a control: an editable graph lists its marks for the reader to change, and no control is among them.
boolean
Also written: locked
Defaultfalse
discrete
Holds the parameter to its stops — the step: ladder, or a column's values, which need not fall on it. With 2 to 12 stops the footer offers them as a list rather than a track. On a cue.slider, the sweep jumps from stop to stop rather than gliding.
boolean
Also written: stepped
Defaultfalse

#Derived attributes

Computed while the element renders — read one with #id.name in attribute position or {{#id.name}} in prose, never set.

valueDerived
Where the parameter currently stands: the reader's setting, or the author's starting point where they have not moved it.

#Allowed in

scene [ ]graph { }cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }code { }region { }flowchart { }logic { }circuit { }network { }

#Examples

The parabola y = ax² at a = 2, with a steepness slider beneath the plot.The parabola y = ax² at a = 2, with a steepness slider beneath the plot.
graph{
    slider:a(name: steepness; range: [0, 4]; step: 0.25; default: 2)
    curve(expression: a * x^2; domain: [-3, 3])
}
Population in millions of Brazil, China and India in 1960, with a Year slider beneath the plot.Population in millions of Brazil, China and India in 1960, with a Year slider beneath the plot.
graph{
    slider#years:t(column: #pop.year; name: Year)
    bar(x: #pop.country; y: #pop.millions; slice: #pop.year)
}
Hours of daylight across the year as a grey curve, an orange point on it at January, and a Month slider beneath the plot reading January.Hours of daylight across the year as a grey curve, an orange point on it at January, and a Month slider beneath the plot reading January.
graph{
    slider:m(format: months; range: [1, 12]; step: 1; name: Month)
    curve(expression: 12 + 3.5 * cos(2 * pi * (x - 6) / 12); colour: grey)
    point(x: m; y: 12 + 3.5 * cos(2 * pi * (m - 6) / 12); colour: orange)
}(
    x-domain: [1, 12]
    y-domain: [6, 18]
)

#Notes

  • slider:a(range: [0, 5]) is the letter a from 0 to 5, and every expression in the scene that mentions a re-evaluates as it moves — a control written in one graph drives a curve in another beside it.
  • Its value is derived as value, reached through the control's node id, so a control the prose cites is written with one: slider#spread:s(range: [0, 3]) is cited as {{#spread.value}}.
  • cue.slider is the same control with the scene moving it; selector takes its stops from a written list.

#Writing guidance

  • Steps, timers, sweeps & parameters — New content on the step that introduces it, timers for timed motion, sweeps for a change the prose describes, and parameters where one sentence holds across the range.

Last updated