Skip to content

Slider

Picks a number or a range by dragging or with the keyboard, with a formatted value next to the label.

alphaReact AriaSource
60

Installation

pnpm add @syntara/react @syntara/tokens
import { Slider } from '@syntara/react';

Usage

import { Slider } from '@syntara/react';

export function Budget() {
  return <Slider label="Monthly budget" defaultValue={60} />;
}

Examples

Range

Two thumbs with their own accessible names; the output uses a formatted range.

₹2,000 – ₹8,000

Formatted values

Percent and unit formatting via formatOptions.

15%
36 months

Disabled

40%

Accessibility

KeysAction
Arrow RightorUpIncreases by one step (Arrow Left increases in right-to-left locales).
Arrow LeftorDownDecreases by one step.
Page UporPage DownChanges by a larger step.
HomeorEndJumps to the minimum / maximum.
TabMoves between thumbs.
  • Each thumb is a native range input, announced with the formatted value.
  • Give range thumbs distinct names with thumbLabels.
  • Direction follows the React Aria locale (I18nProvider); set a right-to-left locale for Arabic or Hebrew interfaces, not only dir="rtl".
  • The track is a 24px-tall target even though the rail is thin.

Guidelines

Do

  • Use when an approximate value is fine and the range is small.
  • Show the value with formatOptions so people don't have to guess.

Don’t

  • Don't use a slider for precise entry like amounts to the rupee; use a TextField.
  • Don't use a range slider without naming both thumbs.

API reference

Slider

label
ReactNode

Visible label. Without one, pass aria-label.

value / defaultValue
number | number[]

One number for a single thumb, [min, max] for a range.

onChange
(value: number | number[]) => void

Called while dragging or stepping.

onChangeEnd
(value: number | number[]) => void

Called when the interaction ends.

minValue
number

Lowest value.

Default 0

maxValue
number

Highest value.

Default 100

step
number

Increment.

Default 1

formatOptions
Intl.NumberFormatOptions

Formats the output and the announced value (currency, percent, units).

showOutput
boolean

Show the formatted value next to the label.

Default true

thumbLabels
string[]

Accessible names for each thumb of a range, e.g. ['Minimum', 'Maximum']; combined with the label.

isDisabled
boolean

Disables the slider.

Default false

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour8
action.primary.bgborder.defaultborder.strongfocus.ringsurface.defaultsurface.sunkentext.disabledtext.subtle
Type2
font.size.smline-height.snug
Space and size5
control-heightspace.1space.2space.3space.6
Shape1
radius.pill
Depth2
shadow.highlightshadow.raised
Motion4
motion.duration.fastmotion.duration.springmotion.easingmotion.spring