Slider

A Slider lets users pick a value — or a range of values — by dragging a handle along a track between a defined minimum and maximum.

Default
Amount $500,000
$10,000 $1,000,000
Drag the handle to set your amount.
States
Amount $500,000
$10,000$1,000,000
Default Resting state. The handle sits at the current value, and the filled portion of the track shows progress from the minimum.
Amount $500,000
$10,000$1,000,000
Disabled The handle is locked. Track, handle, and label are dimmed to make the inactive state clear.
Amount $133,750
$10,000$1,000,000
Hover Shown when the cursor is over the handle or track. A soft halo appears around the handle to signal it can be grabbed.
Amount $10,000
$10,000$1,000,000
Minimum value The handle is at the lower limit. The minimum-range label is highlighted in orange to confirm the boundary has been reached.
Amount $1,000,000
$10,000$1,000,000
Maximum value The handle is at the upper limit. The maximum-range label is highlighted in orange to confirm the boundary has been reached.
Amount $406,000
$10,000$1,000,000
Active The handle is being dragged. It scales up slightly and the selected value updates live as the user moves it.
Amount $257,500
$10,000$1,000,000
Focus The handle has keyboard focus. A visible focus ring appears so users tabbing through the form can locate it. Use the arrow keys to nudge by the step value, Shift + arrow for larger jumps, and Home/End to jump to the limits.
Amount $500,000 – $750,000
$10,000$1,000,000
Range Two-handle variant. Use when the user needs to pick a span (e.g. a budget between a minimum and maximum). The handles can't cross each other.
Behaviour
Interaction
  • Users drag the handle along the track to change the value.
  • The selected value updates live as the handle moves.
  • Clicking anywhere on the track jumps the nearest handle to that point.
  • Default step increment: 1,000.
  • Keyboard: Arrow keys nudge by one step, Shift + arrow jumps by ~1% of the range, Home and End jump to the minimum and maximum.
Range slider behaviour
  • Two handles represent the lower and upper bounds of the selection.
  • The handles cannot cross — each one is constrained by the other's position.
Amount $500,000 – $750,000
$10,000$1,000,000
Specs
1
Amount label
  • States what the slider is for (e.g. "Amount", "Loan term").
  • Recommended max: 45 characters.
2
Selected value
  • Updates live as the handle moves so the user always sees the current value.
  • Positioned below the label.
  • Uses formatted currency or numeric values (e.g. $1,000,000). For range sliders, both values are shown separated by an en-dash.
3
Value range
  • Shows the minimum and maximum selectable values, anchored to each end of the track.
  • Reflects the full range of the slider (e.g. $10,000 – $1,000,000).
  • Positioned below the slider track.
  • Helps users understand the limits before they start dragging.
4
Helper text
  • Optional guidance shown below the slider — e.g. how to interact, unit context, or validation feedback.
  • Recommended max: 100 characters.
1 Amount
2 $500,000
3
$10,000$1,000,000
4 Drag the handle to set your amount.
Dos and Don'ts
  1. Use a slider when the user is choosing from a continuous range and the exact value is less critical than the relative position (e.g. budget, loan amount, brightness).
  2. Always show the minimum and maximum values so users understand the range before they drag.
  3. Update the displayed value live as the handle moves so users see the impact of every adjustment.
  4. Don't use a slider when users need a precise value — pair it with a number input, or use a number input alone.
  5. Don't hide the minimum or maximum labels — without them, the user can't judge where the handle currently sits.
  6. Don't use a slider for a small set of discrete options (≤ 5) — radio buttons or a segmented control are clearer.
  7. Always make the slider keyboard-operable (arrow keys, Home/End) so it's accessible to non-mouse users.