Spec — Sliders

Facet Visual of Koder Design. Material parity: https://m3.material.io/components/sliders.

Variant matrix

Pick:

• Continuous when any value within range is meaningful (volume, hue).
• Discrete when only certain values matter (rating 1-5, T-shirt size).
• Range when user picks an interval (price min-max, time of day range).

Anatomy (continuous single)

   Volume                                   75
   ────●────────────────────────────────── ↑
   ↑   ↑                                  value label
 track handle

• Track: 4 px tall (default), pill-shaped, surface-container-highest
• Active track (filled portion): primary color
• Handle: 20 px circle, primary color, 4 px halo on focus / drag
• Track gap: 4 px on each side of handle (visible separation; Material 3 detail)
• Value label: chip-shaped overlay above handle on drag
• Hit target: 48 × 48 px around handle (extends beyond visual 20 px)

R1 — Discrete with step marks

   Rating                                   ★ ★ ★ ★ ☆
   ──●──┊──┊──┊──┊──┊
       1  2  3  4  5

• Step marks: 2 px circles on the track at each step position
• Marks under filled portion: on-primary color (subtle)
• Marks over unfilled portion: on-surface-variant
• Snap-to-step: handle releases to nearest step
• Step intervals must be uniform OR documented (e.g., powers-of-2)

R2 — Range slider

Two handles + filled segment between them:

   Price                            $35 ────  $120
   ──────●━━━━━━━━━━━━━━●──────────
         ↑              ↑
        min            max

• Both handles draggable
• Min handle cannot pass max handle (and vice versa)
• Optional minimum gap between handles (e.g., min range = 5 units)
• Two value labels on drag

R3 — Value label

Label content:

• Numeric value (default)
• Formatted value (e.g., "$35", "75%", "2 hr 30 min")
• Custom string via formatter function

Label shape:

• 28 px tall, pill-shaped
• primary bg, on-primary text
• label-medium (12/16, weight 500)
• Anchored 12 px above handle; tip pointing down

R4 — States

R5 — Tick / step mark variants

For step ≥ 10, marks become noisy. Options:

• Show all marks (default for ≤ 10 steps)
• Show only labeled marks (e.g., every 5th)
• No marks at all (use ranges with labels above)

Document chosen variant in component instance.

R6 — Numeric label format (per locale)

Per i18n/contract.kmd:

• Decimal separator: 1.5 (en-US) / 1,5 (pt-BR)
• Thousands separator: 1,000 / 1.000
• Currency / units: locale-aware

R7 — Keyboard navigation

R8 — Accessibility

• Container: role="group" + aria-label (range slider needs group because it has two handles)
• Single handle: role="slider" + aria-valuenow / aria-valuemin / aria-valuemax + aria-label
• Range handles: each handle has role="slider" with own valuenow / min / max; min handle's max = current max handle value (and vice versa)
• aria-valuetext for formatted value (e.g., "75 percent")
• Live region announces value change during drag (polite)
• Don't rely on color alone for active vs inactive segments

R9 — Animation

• Drag: 1:1 with input (no easing)
• Release-to-step (discrete): snap with motion-emphasized-decelerate (~200 ms)
• Value label appear: scale-in 0.95 → 1 + fade (motion-fast)
• Value label disappear: fade-out (motion-fast)
• Handle scale-up on hover / focus: motion-fast
• Reduced motion: no scale animation, no spring; instant changes

R10 — Range thumb collision

When two handles meet (min approaches max):

• Default: handles cannot pass each other; second handle blocks
• Optional: handles can swap (min handle's value becomes greater than initial max → roles reassign)

Pick policy per instance and document. Default is "no pass".

R11 — Density

Hit target stays 48 × 48 px regardless.

R12 — Per-preset variation

R13 — Forbidden patterns

• ❌ Slider for values with NO meaningful intermediate (use radio / segmented buttons)
• ❌ Slider without value indication (label or visible value somewhere)
• ❌ Hit target < 48 × 48 px around handle
• ❌ Range slider where one handle can hide behind the other
• ❌ Drag that updates value only on release (laggy / unresponsive)
• ❌ Step intervals so dense they look continuous (use a continuous slider with snap-on-release instead)
• ❌ Slider for >100 steps (use input field / numeric stepper)
• ❌ Color alone for active / inactive (must work in monochrome)
• ❌ Slider that triggers irreversible action on drag (e.g., file delete, sale checkout) — use confirmation pattern

Cross-link

• themes/color-roles.kmd — primary for active track + handle
• themes/motion.kmd — emphasized-decelerate for snap
• themes/typography.kmd — label-medium for value
• i18n/contract.kmd — locale-aware numeric format
• interaction/states.kmd — hover / focused / dragging layers
• foundations/elements.kmd — Control family