figma guide
Designing sliders and range inputs in Figma: patterns, states, and handoff
Design single and dual-thumb sliders, stepped ranges, and value labels in Figma with track states, min/max bounds, and Dev Mode specs for forms and filters.
- Published
- Updated
- Jun 14, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
Sliders in Figma express a numeric value along a track—single-thumb for one value, dual-thumb for ranges, and stepped tracks for discrete choices. Build a Slider component with variants for type=single | range, state=default | disabled | focus, and size=sm | md. Pair with forms, search filters, and date range pickers. Document min, max, step, unit, snap behavior, and whether the numeric input is editable in Dev Mode. Start from the Figma guides hub for component patterns.
Who this is for
- Product designers shipping price filters, settings panels, media controls, and onboarding preference screens.
- Design system teams replacing inconsistent slider mocks that use different track heights in every file.
- Engineers implementing accessible range inputs, keyboard nudging, and touch-friendly thumb targets.
Slider types compared
| Type | User adjusts | Best for | Avoid when |
|---|---|---|---|
| Single continuous | One value on a track | Volume, opacity, brightness | Choosing from 3–5 fixed options |
| Dual range | Start + end thumbs | Price filters, date ranges on a scale | Single-point settings |
| Stepped / discrete | Snaps to ticks | Star ratings on a scale, seat rows | Smooth analog control |
| Slider + input | Drag thumb or type number | Precise values (px, %, currency) | Pure gesture-only mobile flows |
| Vertical slider | Up/down track | Audio mixers, heat maps (rare) | Standard horizontal forms |
| Segmented track | Colored zones (low/med/high) | Risk scores, signal strength | Neutral numeric settings |
Verdict: use slider + numeric input when precision matters; use pure slider when the value is approximate (volume, satisfaction). For categorical choices with fewer than five options, prefer segmented controls in forms or radio buttons instead.
Component anatomy
| Part | Purpose | Spec tip |
|---|---|---|
| Track | Full-width background rail | Height 4–6px; full radius |
| Filled track | Portion from min to thumb | Brand or neutral emphasis color |
| Thumb | Draggable handle | 16–24px circle; min 44px hit area |
| Second thumb | Range end (range mode) | Same size as first; z-index on overlap |
| Tick marks | Optional step indicators | Align to step intervals |
| Value label | Shows current number | Above thumb or inline right |
| Min / max labels | Track endpoints | $0, $500—not always needed |
| Input field | Editable value (optional) | Reuse form text field sm size |
| Helper text | Unit or constraint | ”Up to 100 km” |
Slider
├── Variant: type=single | range
├── Variant: state=default | disabled | focus
├── Variant: size=sm | md
├── Layer: Track (full width, surface/subtle fill)
│ ├── FilledTrack (width = value %)
│ ├── Tick × N (optional)
│ └── Thumb(s)
├── Layer: ValueLabel (optional, above thumb)
├── Layer: MinMaxLabels (optional)
└── Layer: NumericInput (optional, paired)Bind track and thumb colors to your semantic color tokens. Use elevation or focus rings for keyboard focus—not color alone.
Thumb and track states
| State | Track | Thumb | Notes |
|---|---|---|---|
| Default | Neutral rail; filled portion brand | Resting circle | Pointer on hover |
| Hover | Same | Slightly larger or elevated | Desktop only |
| Dragging | Filled updates live | Active / pressed | Show value label |
| Focus | Visible focus ring on thumb | WCAG 2.2 target | Arrow keys nudge value |
| Disabled | Muted rail; no fill change on drag | Muted thumb; no pointer | aria-disabled |
| Error | Optional red rail | Pair with inline alert | Out of allowed range |
Reuse interactive components for thumb hover and press. Focus must be visible when tabbing—do not rely on hover alone.
Single vs range behavior
| Concern | Single slider | Range slider |
|---|---|---|
| Thumbs | One | Two (min, max) |
| Filled segment | Min → thumb | Low thumb → high thumb |
| Overlap | N/A | Min thumb cannot pass max—document swap or block |
| Labels | One value | $120 – $480 combined or per thumb |
| Input pairing | One number field | Two fields or one combined readout |
| Filter apply | Immediate or on release | Often waits for Apply on filter bar |
Show live preview of filtered results when dragging in e-commerce mocks—use a loading skeleton on the product grid if results refresh async.
Stepped sliders and ticks
| Step type | Visual | Use case |
|---|---|---|
| Continuous | Smooth fill | Volume, zoom |
| Fixed step | Snap every N units | 5% increments, $10 steps |
| Labeled ticks | Text under track | 0, 25, 50, 75, 100 |
| Icon ticks | Stars, signal bars | Satisfaction, quality |
Document step in Dev Mode (step=10, min=0, max=100). If steps are uneven (e.g., log scale), add a table in the component description—engineering cannot infer from pixels alone.
Pairing with other patterns
| Need | Pattern | Link |
|---|---|---|
| Price filter sidebar | Range slider + chips | E-commerce, marketplaces |
| Settings panel | Slider + label in accordion | Notification volume, limits |
| Form validation | Slider + inline error | Budget cap exceeded |
| Mobile filter sheet | Slider in modal sheet | Narrow viewports |
| Table column filter | Compact sm slider in header | Dense admin UI |
| Onboarding | Slider for team size / usage tier | Pair with progress stepper |
Accessibility checklist
| Requirement | Implementation |
|---|---|
| Role | role="slider" per thumb |
| Value | aria-valuemin, aria-valuemax, aria-valuenow |
| Label | Visible label or aria-label="Price maximum" |
| Keyboard | Arrow keys ± step; Home/End to min/max |
| Focus | One tab stop per thumb in range mode |
| Touch target | 44×44px minimum hit area |
| Announcements | Live region on value change (optional) |
| Color | Track fill not the only state indicator |
Run accessibility plugins on thumb contrast against the track and page background.
Prototyping limits
Figma cannot drag sliders with real math. For demos:
- Build frames: default, dragging (mid), min, max, disabled, focus.
- For range: partial selection, full span, thumbs overlapping edge case.
- Wire thumb drag with a simple interaction if needed; otherwise use sticky notes for dynamic fill width.
Organize variants under Patterns / Forms with sections per screen context.
Handoff to engineering
| Deliverable | Where it lives |
|---|---|
min, max, step | Component description |
| Unit suffix | %, px, USD—per locale if currency |
| Decimal precision | 0 vs 2 decimal places |
| Range overlap rule | Block vs swap thumbs |
| onChange vs onCommit | Drag live vs release only |
| Input sync | Typing updates thumb bidirectionally |
| Vertical vs horizontal | orientation prop |
| Disabled ranges | e.g., thumb cannot enter “sold out” band |
| Mobile | Larger thumb; haptic on step (note only) |
Include sliders in your Dev Mode handoff checklist. Publish components in your team library.
Real-world examples
E-commerce price filter
Dual-thumb range $0–$500, step $10, live product count label above track. Apply button commits filter; active range shown as chip on search bar.
Image editor opacity
Single slider 0–100%, numeric input synced, stepped by 1. Compact sm size in right sidebar panel.
SaaS seat limit
Single slider 1–50 seats, stepped by 1, tick every 10. Helper text updates pricing tier at 10 and 25 seats—document tier breakpoints in description.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Thumb smaller than 44px hit area | Miss taps on mobile | Invisible padding around thumb |
| No min/max in spec | Wrong defaults in code | Document all bounds |
| Range thumbs can cross | Invalid state in production | Block or auto-swap—pick one |
| Slider for 3 options | Harder than radio buttons | Use radios or segmented control |
| Value label only on hover | Mobile users never see value | Persistent label or input |
| Log scale drawn linearly | Wrong data mapping | Provide value table |
| Disabled track still draggable in prototype | False expectation | Match disabled visual to behavior |
| Currency without locale | Wrong separators | Note en-US vs de-DE format |
FAQ
Slider or number input only?
Use both when users need precision (budget, dimensions). Use slider only for approximate control (volume, warmth). Always show the current value somewhere.
Show min/max labels on every slider?
Optional. Skip for 0–100% where context is obvious. Required for price and custom scales.
Dual range in a table filter row?
Prefer a filter popover with full-width slider; cramped inline ranges fail on small screens.
Vertical slider in mobile apps?
Rare for forms; horizontal is default. Vertical works for audio faders—document orientation=vertical and taller hit areas.
Bottom line
Design sliders as bounded numeric controls: track, fill, thumb(s), labels, and explicit min/max/step rules—not decorative lines. Document interaction timing, input sync, and range overlap in Dev Mode. Continue with forms, search filters, date pickers, and the tutorials hub.
§ Keep reading