FORMS · FORM ELEMENTS

Sliders

Single, range, vertical, colour and zoned sliders. Pointer capture, full keyboard support, synced inputs and linked values.
THEME
DENSITY
01

Playground

Type, step, size, value label, state, scale — live
PREVIEWLive · 60%
Opacity
Drag, click the track, or focus the thumb and use arrows (Shift = ×10).
ACCESSIBILITY TREE
roleslider
name"Opacity"
valuearia-valuenow=60 · valuetext "60%"
range0 – 100 · step 1
stateshorizontal
Settings
TYPE
STEP
SIZE
VALUE LABEL
STATE
SCALE
CODE
<Slider label="Opacity" value={60} min={0} max={100} step={1} valueLabel="tooltip" formatValue={v => `${v}%`}/>
02

Variants

8 sliders, all working
Single + inputslider and field stay in sync
Corner radius: 72% of the shorter side
Price rangehistogram · min gap $100 · from / to
—144 of 171 products
Discrete with labelssnaps to 5 steps
LowestLowMediumHighUrgent
MediumThis week
Colourhue · saturation · lightness · opacity
#98DAE7hsl(190 62% 75% / 100%)
Hue190°
Saturation62%
Lightness75%
Opacity100%
With iconsvolume · click the icons to step
80%
Vertical · mixer5-band EQ · ↑ ↓ keys
+3 dB
60 Hz
+1 dB
230
-1 dB
910
+2 dB
3.6k
+4 dB
14k
With zonesbudget usage · colour follows the zone
Studio budget used62% · $29,760 of $48,000
070%90%100%
On track$29,760 spent · $18,240 left this quarter
Native<input type="range"> · for comparison
Fine for simple settings. You can’t add a range, tooltip, zones or marks — and styling differs per browser.
03

States

Thumb and track
DEFAULT
HOVER
FOCUS
DRAGGING
DISABLED
READ-ONLY
Track4 / 6 / 8 px, full radius, 14% ink
FillCyan from min (or from 0 for ± values)
Thumb16 / 20 / 26 px, 2 px cyan ring, soft shadow
Focus4 px ring at 35% — keyboard and pointer
DraggingScale 1.15 plus an 8 px halo; tooltip stays on
Hit area44 px tall container; the track is only the visual
04

Behavior

Keyboard & pointer, typed values, preview vs commit
Keyboard & pointerevery input path, logged
Opacity50%
← →±1 step⇧ + arrow±10 stepsPgUp PgDn±10% of rangeHome EndMin / maxClick trackJump thereDragPointer capture
EVENT LOGDrag, click the track, or focus the thumb and use the keys.
Typed valuesclamp · round to step · explain
Seats12 seats
Type 0, 75, 12.6 or “ten” to see how the field reacts
Live preview, commit on releasepreview every frame · save once
Brightness100%
Contrast100%
Saved
05

In Avava

Budget filter, export quality, budget split
Projects · budget filter40 projects · histogram · live count
$10k – $40k25 of 40 projects
Spring campaignNova$18k
Brand bookAtelier$24k
App onboardingOrbit$36k
Lookbook SS27Sable$14k
Export settingsquality · scale · size estimate
JPG quality82%
SmallestWebPrintMax
SCALE
2.5 MB1600 × 1200 at 2× · sweet spot for web
Budget splitthree linked sliders · always 100%
Design45% · $21,600
Development35% · $16,800
Marketing20% · $9,600
Total 100% of $48,000 · moving one slider rebalances the unlocked ones proportionally
06

Rules & a11y

When to use a slider, anatomy, screen readers
Slider or field?precision decides
Rough value, visual feedback
SliderOpacity, volume, brightness
Exact number matters
Field (+ slider)Price, seats, dimensions
Small set of steps
Discrete slider or segmentedPriority, quality presets
A span
Range slider + two fieldsBudget, price filters
Values must add up
Linked sliders with locksBudget split, mix
Anatomytrack · fill · thumb · value · marks
62%1234
1Track — the full range; click anywhere to jump
2Fill — from the start to the value
3Thumb — 20 px visual, 44 px hit area, focusable
4Value — tooltip while hovering, focusing or dragging
Screen readersrole="slider" done right
✓role="slider" tabindex="0"One per thumb — a range has two
✓aria-valuemin / max / nowRange thumbs narrow each other’s min and max
✓aria-valuetext="$1,800"Human text, not just the raw number
✓aria-orientation="vertical"And ↑ ↓ map to more and less
✓aria-label per thumb“Price minimum”, “Price maximum”
✓Always pair with a visible valueOr an input for exact entry
DO✓Show the value while dragging and next to the label✓Add an input when the exact number matters✓Use steps and marks when only some values make sense✓Preview live, save once on release✓Keep thumbs from crossing in a range
DON’T✕Use a slider for a precise price or quantity alone✕Hide the min and max of the scale✕Make the hit area as thin as the track✕Save to the server on every pointer move✕Use colour alone for zones — label them