Inputs
Slider
Select a value from a continuous or discrete range, with keyboard support.
Examples
States
Anatomy
Slider anatomy| # | Part | Description | Presence |
|---|
| 1 | Track | 4 / 6 / 8px | Required |
|---|
| 2 | Fill | Value portion | Required |
|---|
| 3 | Thumb | 16 / 20 / 24px, 44px halo | Required |
|---|
| 4 | Value | Visible output next to the label | Required |
|---|
Specifications
| Sizes | Small · Medium · Large |
|---|
| Themes | Light · Dark |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Focuses the thumb |
|---|
| ← ↓ → ↑ | Decrease / increase by one step |
|---|
| Page Down Page Up | Larger step |
|---|
| Home End | Minimum / maximum |
|---|
Pointer and touch| Trigger | Response |
|---|
| Click on track | Jumps the thumb |
|---|
| Drag | Moves continuously |
|---|
| Hover | Thumb gains a halo |
|---|
Accessibility
role · slider
1.4.11Non-text Contrast2.1.1Keyboard2.5.7Dragging Movements4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Native input | <input type="range"> exposes the slider role and every key above |
|---|
| Value | Show the number; use aria-valuetext for units (45%) |
|---|
| Alternative to dragging | Keyboard steps or a paired number input (WCAG 2.5.7) |
|---|
| Contrast | Track and thumb meet 3:1 |
|---|
Read the matching WAI pattern ↗
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Show the current value | ✕Do not use for exact values (use Input) |
| ✓Use steps that match the decision | ✕Do not hide the value inside the thumb only |