Range slider

Overview

A slider is the right control when the user is picking a point on a continuous scale and the position itself carries meaning — a cash advance against revenue, a daily auto-debit cap, a risk tier. It makes sense the moment a precise number is overkill (the user wants “around 4 grand”, not “exactly 4.137 €”) but the magnitude still matters. For exact values, reach for a number input.

Anatomy

Five parts. The label area sits above the track; the range labels sit below. Both are optional in pairs — but the track itself, the fill, and the thumb are always present.

Types

Two type variants. The single-thumb slider picks one value on a scale; the two-thumb range picks both ends of a window. Same track, same dimensions — only the thumb count changes.

Header and labels

Three pieces of supporting copy can sit around the track: a label (always recommended unless the question is obvious), an inline value display (when the user needs to read the live number as they drag), and the min/max range labels (when the absolute scale matters).

Continuous and discrete

A continuous slider lets the thumb glide; the value can be any number in the scale. A discrete slider snaps to evenly spaced notches — use it when only specific values are meaningful.

States

Five visible states. Held still here for review — hover, focus, and active come for free on the real component via CSS pseudo-classes.

Error

Apply the error tone when the picked value violates a constraint the user can resolve — exceeding a cap, dropping below a minimum, or conflicting with another field. The track and thumb both flip; a single-line helper below the range names the constraint.

Behavior

• 01Click anywhere on the track to jump to that value. The thumb animates to the click position in 150 ms. The whole track is the click target — not just the 16 px thumb.
• 02Drag with the cursor or finger. The thumb follows the pointer; the value updates as it moves (controlled state) so any inline value display reflects the live number.
• 03Keyboard moves in steps. ← / → move by 1 step; Home and End jump to min and max. Page Up / Page Dn move by 10× step.
• 04Range thumbs can't cross. On a two-thumb slider, the lower thumb stops at the upper thumb's position — and vice versa. The two never pass each other; the constraint is enforced before the value updates.
• 05Round to a sensible step. Even on a continuous slider, the user almost never wants fractional values. Round to the nearest 1, 5, 10, or 100 depending on the scale; the input feels smooth without committing to noise.

Slider vs. input vs. select

The slider, the number input, and the select all answer “pick a value” questions, but they earn their place in different contexts.

Accessibility

• Native input where possible. <input type="range"> inherits keyboard, focus, value reporting, and aria-valuenow announcements for free. Wrap it for visual styling; don't replace it.
• Label association. Every slider needs an accessible name — either a wrapping <label> element or aria-labelledby pointing at the visible label area.
• aria-valuetext when units matter. The default aria-valuenow announces a bare number. When the value is currency, percent, or anything formatted, set aria-valuetextto the formatted string — “4.200 €”, not just “4200”.
• Range:use two inputs, each with its own accessible name (“Minimum”, “Maximum”). A single role="group" wrapper with a shared legend describes the field as a whole.
• Focus order:on a range, the lower thumb tabs first, then the upper. Don't reverse the order or skip the lower thumb when it's at the start.
• Touch target:the visible thumb is 16 px; the actual hit area extends to the full track height (44 px+) so touch users don't have to thread the needle.
• Reduced motion: the click-to-jump animation is a 150 ms transform. Honour prefers-reduced-motion — snap the thumb instead of animating.

Code

One RangeSlider component, one props shape. Single-thumb is the default; pass value as a tuple to render the two-thumb range.

import { RangeSlider } from "@flatpay-dk/ui";

// Single value
const [advance, setAdvance] = useState(4200);
<RangeSlider
  label="Cash advance"
  description="Pick the amount you want advanced."
  value={advance}
  onValueChange={setAdvance}
  min={0}
  max={10000}
  step={100}
  format={(v) => new Intl.NumberFormat("da-DK", {
    style: "currency",
    currency: "EUR",
    maximumFractionDigits: 0,
  }).format(v)}
/>

// Discrete steps
<RangeSlider
  label="Risk tolerance"
  value={tier}
  onValueChange={setTier}
  min={0}
  max={4}
  step={1}
  showRangeLabels
  rangeLabels={["Low", "High"]}
/>

// Two-thumb range
const [bounds, setBounds] = useState([10, 70]);
<RangeSlider
  label="Transaction size"
  description="Filter to transfers inside this range."
  value={bounds}
  onValueChange={setBounds}
  min={0}
  max={50000}
  step={500}
  format={(v) => `${v.toLocaleString("da-DK")} €`}
/>

// Inline value display + error
<RangeSlider
  label="Cash advance"
  value={advance}
  onValueChange={setAdvance}
  min={0}
  max={10000}
  showValue
  error={advance > maxAllowed
    ? "Maximum advance is 8.000 € against your current revenue."
    : undefined}
/>

Best practices

Sliders are unfamiliar in dense product UI. The defaults below keep them legible without surprising the user.

Props

Related