Slider
A hairline track, the filled part an ink rule, and a node for the thumb.
States
-
Rest
value 40
A hairline, an ink rule to the value, an ink node.
-
Hot
hover
The node turns --state.
-
Focused
:focus-visible
The node stays --state while the keys move it.
-
Disabled
disabled
The hairline alone and a tissue node.
Anatomy
| Height | one module (24px), the column’s width |
|---|---|
| Track | a 1px --border hairline |
| Filled | a two-dot --ink rule from the start to the value |
| Thumb | a node of grain, five dots in radius, in --ink |
| Hot, focused | the node turns --state |
| Release | letting go fires the node, 280ms |
| Input | the range input stays real and on top, invisible, so keys and touch work natively |
The flare’s length is read from the engine at build time (rule.ts).
Decisions
-
The input stays real
The native range sits over the drawing, transparent, so arrow keys, Page Up and Down, touch and assistive technology all work as the platform does.
-
Rules, not a bar
The track is a hairline and the filled part an ink rule, the two line weights the page already uses, rather than a rounded bar.
-
Letting go fires
The value is chosen when you let go, so that is where it fires, not on every step of the drag.