Skip to content
Nexus Application Design nadesign

SliderRow

<SliderRow> is the canonical Settings row for a continuous value. Label + right-aligned formatted value on top, full-width Slider below. S7 in 13-section-anatomy.md.

import from "@na/ui/components/SliderRow" ▶ Open in Storybook packages/ui/src/components/SliderRow.tsx

When to use

  • Continuous numeric settings: speed, opacity, threshold, gain.
  • Settings where the position in the range carries meaning (a feel, not an exact number).

Don’t use SliderRow for: discrete integer counts (NumberInputRow), 2–5 options (SelectRow or SegmentedControl).

Default

1.20×
 
<SliderRow
  label="Speaking rate"
  value={config.voiceSpeakingRate}
  onValueChange={(v) => setConfig({ ...config, voiceSpeakingRate: v })}
  min={0.25}
  max={4}
  step={0.05}
  formatValue={(v) => `${v.toFixed(2)}×`}
  ariaUnit="speed"
/>

API

Prop Type Default Description
label * string — Sentence-case label.
value * number — Single thumb value.
onValueChange * (next: number) => void — Fires on every change.
min * number — Range minimum.
max * number — Range maximum.
step number 1 Increment.
formatValue (value: number) => string — Format for display + aria-valuetext. Defaults to String(v).
ariaUnit string — Unit phrase appended to formatValue for screen readers (e.g. "speed" → "1.20× speed").
description string — Optional muted helper text below the slider.
disabled boolean false Disable the slider.

Design guidelines

✓ Do

  • Always pair with formatValue. Raw numbers like "1.2" tell the user nothing.
  • Set ariaUnit so screen readers hear "1.20× speed" instead of just "1.2".
  • Pick a step that matches the precision the user can actually feel (step={0.05} on a 0–4 scale, not step={0.001}).

✗ Don't

  • Use SliderRow for integer counts — that's NumberInputRow.
  • Hide the value display. The number anchors the slider position.

Accessibility

  • The Slider thumb gets aria-valuetext from formatValue + ariaUnit.
  • Keyboard: ←/→ step, Home/End jump to bounds, PageUp/PageDown larger steps.

▶ Open SliderRow stories in Storybook