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
Scroll area
A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it. Scrolling itself is the browser’s own.
Seats open in 11 days. Want one email that morning?
Anatomy
The rail is the scrollbar’s own parts, dressed: the track is the kit’s recess drawn as a groove (dark under its upper wall, the lower lip lit) and the thumb is the fader cap from the fader part, a light-to-dark face, a lit top edge, a skirt inside its lower one and one ink line across the middle. Held, the cap loses its skirt. The edge shade is the classic cover-and-shadow pair of background layers.
Variants
- Plain · rail only
- Edges · a shade where there is more
- Well · cut into the plate
- Small rail
- Sideways
- Both axes
States
- Rail at rest
- Keyboard focus
- Well
- Edges
Props and options
| Name | Kind | Description |
|---|---|---|
| aria-label | attribute | What lets the keyboard scroll it, and names it. Not needed if a focusable control is inside. |
| ::-webkit-scrollbar-track · -thumb | pseudo-element | The groove and the cap. Where they are not understood the fallback below is used. |
| ↑ ↓ · Page Up / Down · Space · Home / End | keyboard | Scroll the focused area, as anywhere. |
Usage notes
Scroll it with the wheel, a drag on the cap, or the keyboard: click in and use the arrows, Page Up and Down, Space, Home and End.
Accessibility
- The keyboard scrolls what it can focus.
- It is the browser’s own scrolling, so the wheel, touch, momentum, Page Up and Down, Space and find-in-page work as people expect; nothing is intercepted.
- The edge shade is a second cue that there is more; on touch screens, where the rail is hidden, it is the only one.
- Smooth scrolling is on unless reduced motion is asked for.
