Selection And Input
Sliders
A thin track with a circular thumb sized to the toggle's exact proportions — the continuous-value counterpart to the Toggle's binary one.
Findings
What's actually in /ig
- The Toggle's thumb — the system's confirmed circular drag handle — is fully specified (28px, 14px radius, layered shadow) and transfers directly to continuous value control.
Rationale
Why this component exists
A slider is a toggle whose track is continuous instead of binary, so its thumb keeps the exact dimensions already proven on Toggles rather than introducing a second handle size. The filled portion of the track uses the same primary-button blue used everywhere else a control communicates 'this much is active.'
Usage
When to use it
Use when
Setting a continuous or near-continuous value with immediate visual feedback — playback scrubbing, a volume level.
Avoid when
The value has only a few discrete steps (use Steppers) or the choice is categorical, not numeric (use Segmented Controls).
Anatomy
Anatomy
- 01
Track (full width)
- 02
Filled portion (value indicator)
- 03
Thumb (drag handle)
- 04
Value label (optional, shown while dragging)
Specification
Spacing, colour, type, and motion
- Track height
- 4px, centered vertically in a 28px tap target
- Track fill (inactive)
- rgb(var(--ig-secondary-background))
- Track fill (active/value)
- rgb(var(--ig-primary-button))
- Thumb
- 28px diameter, 14px radius — identical to the Toggle thumb
- Thumb shadow
- 0 3px 8px rgba(0,0,0,.15), matching the Toggle thumb exactly
- Motion
- Thumb position tracks the pointer 1:1 while dragging; on release, settles with Ease Glide if snapping to a step
States
States
| State | Behaviour |
|---|---|
| Default | Thumb at current value position, track filled up to that point. |
| Dragging | Thumb scales to 1.1× and shows a value label above it. |
| Disabled | Opacity .3, matching the Toggle's disabled treatment exactly. |
Examples
Real interface compositions
Reel editor
Reel audio mix
Original audio and music volume controls use a thin active track and the same 28px circular handle proven by Toggles, with a value label while dragging.
4px track, --ig-primary-button active fill, 28px thumb, toggle shadow
Accessibility
Accessibility
- Implement as role="slider" with aria-valuemin/max/now, and support arrow-key increments of one step per press.
Do / Don't
Do / Don't
Do
- Size the thumb at 28px/14px-radius to match Toggles — the system has exactly one circular-handle size, not a per-control one.
Don’t
- Disable by recolouring the track — disable by dropping opacity to .3, matching Toggles.