Slider: the set value to its step's decimals; the reading marked on the track and on the ring; mark geometry in the docs

This commit is contained in:
Melvin Strobl
2026-10-14 16:00:53 +02:00
parent d05d3c4665
commit 66e6c4b6ec
11 changed files with 141 additions and 14 deletions
+16 -4
View File
@@ -69,9 +69,18 @@ A Slider can also show what it sets against, such as the room's temperature
beside a setpoint: **Beside it** binds `reading: {message, dtype, label}` to a
`float` or `int`. The reading is only shown, never published. It is written in
the slider's unit and to its step's decimals (a step of 0.5 writes 21 as
`21.0`); `—` stands in for the value until one arrives. On a round face it
takes the middle (see [Round dashboards](#round-dashboards)); in a tile it is a
line under the slider's value.
`21.0`), as the slider writes its own value, so the two always match; `—`
stands in for the value until one arrives. On a round face it takes the middle
(see [Round dashboards](#round-dashboards)); in a tile it is a line under the
slider's value.
It is also marked where it sits on the slider's scale, as a thermostat marks
the room's temperature: the handle is what is set, the mark what is. The mark
is a bar across the track or the ring, in the text colour, at the reading's
fraction of the scale, (reading − min) / (max − min) held to 0–1, so a reading
outside the range sits at that end. It is drawn over the track and its fill
and under the handle, and is longer than the handle, so it still shows where
the two meet. It takes no pointer, and there is none until a value arrives.
Sizes are CSS pixels of the canvas, as in the round geometry below. The
slider's own value is at the tile's text size (14; 16 on a touch-friendly
@@ -83,6 +92,9 @@ panel), centred on a line as tall as the control (32; 48 touch-friendly).
| Row | directly under the slider's value, right-aligned with it, in the column right of the track (12 apart). With ticks the line shares the ticks' row, so the tile grows no taller; without them it adds 16 |
| Row width | the value column is as wide as its wider line, but at most half the row; the track takes the rest. What does not fit is cut from the label; the value and unit never are |
| Fader | directly under the slider's value, both centred under the track, 8 below it; the line no wider than the tile inside its padding, cut from the label first |
| Mark (row) | a bar 2 wide and the handle's diameter + 8 long (16 + 8 = 24; 24 + 8 = 32 touch-friendly), centred on the track's midline (the track is 8 thick). Its centre sits on the handle's travel: handle ÷ 2 + fraction × (track length − handle) from the track's left end, so mark and handle line up at the same value |
| Mark (fader) | the same turned: 2 high, handle + 8 wide, centred on the track, measured up from its bottom end |
| Locked | the mark at 0.45 opacity, as the handle |
## Charts
@@ -249,7 +261,7 @@ look's muted text colour.
| Ring band | 40 along the edge |
| Ring arc | start 120°, sweep 300° (ends at 60°), centre-line radius c − 20, stroke 16 with round caps |
| Slider | track over the sweep, value arc from the start to the value (none at the minimum), handle 28 across; the value as the centre reading |
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value |
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value. The reading's mark: a bar 36 long and 3 wide, square-ended, in the text colour, along the radius at the reading's fraction of the sweep (the same angle the handle has at that value), centred on the ring's centre line, so from radius c − 38 to c − 2; over the track and value arc, under the handle |
| Selector | a 6 mark per option at i/(n−1) of the sweep (one option: the middle), the selected one under the handle; its label as the centre reading, at most 36 |
| Colour | hue h at h/360 of the sweep in 150 strokes of 2°, red at both ends; the handle filled with the colour; a swatch 96 across in the middle, with a hairline border |
| Gauge | track and value arc, no handle; the value as the centre reading |