Fader
A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
Kit parts
Knob
A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
Seats open in 11 days. Want one email that morning?
Anatomy
The only custom element in the kit.
Variants
- Small
- Large
- Black cap on any finish
- Stepped
States
- Minimum
- Middle
- Maximum
- Focus
Props and options
| Name | Kind | Description |
|---|---|---|
| min · max · step · value | attribute | The range and the start value. Values snap to the step. |
| label | attribute | Becomes the aria-label. |
| unit | attribute | Added to aria-valuetext. |
| labels | attribute | A name for each step from min, spoken instead of the number: a detented selector says “Team”, not “1”. Print the names round it too. |
| ticks | attribute | |
| name | attribute | Form-associated: the value posts with the form under this name. |
| data-material | attribute | What the body, knurl, cap and pointer are made of, apart from the page’s finish: a porcelain knob on a Black page. The ticks are printed on the plate and keep the finish. Anodised blue and green go on a whole device only. |
| input · change | event | input while turning; change on release, and after each key or wheel step. |
| Drag | pointer | Up or right turns it up. Shift: five times finer. |
| Arrows · PageUp/PageDown · Home/End | keyboard | Up and Right turn it up. The wheel steps it while it has focus. |
Usage notes
Drag up or right, scroll while it is focused, or use the arrow keys. Hold Shift for fine work.
Accessibility
- Reached with Tab; every value is reachable from the keyboard, so dragging is never required.
- The wheel only turns it while it has focus, so scrolling the page never changes a setting by accident.
