Slider

Needs review
WCAG 2.2 evidence
RTL

Picks a value, or a range, by moving a thumb along a track. Types: single, range (two thumbs), stepped (dots at every step) and with-input (plus a number field). Built on React Aria Slider: each thumb is a focusable range input named by label (range thumbs by thumbLabels) with a localised aria-valuetext from formatOptions. Arrow keys step, Page Up / Page Down jump 10 %, Home / End go to the limits; pressing the track moves the nearest thumb; with-input adds typing (WCAG 2.1.1, 2.5.7, 4.1.2). The thumb is a 24 px pointer target (2.5.8). RTL reverses the direction and the arrow keys. Horizontal only. Contrast: Figma draws the unfilled ticks and the disabled thumb in border/strong, 1.47:1 (Light) / 1.70:1 (Dark) on the surface (a known token exception). The value never depends on them: the thumb (2 px brand/primary ring) and the fill (brand/primary) carry it at 3:1, and the value is always shown as text in the header (or in the number field) and announced as aria-valuetext (WCAG 1.4.1, 1.4.11). Consumer duties: label wording and units (formatOptions, for example { style: "unit", unit: "day", unitDisplay: "long" }), matching minLabel / maxLabel.

import { Slider } from "@nexera-ui/react";

Loading example…

7
examples: 22
props: 2
live controls: 1
platform: 11
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

isDisabledfalse

Generated code

import { Slider } from "@nexera-ui/react";

<Slider />

Examples 6

The same examples as Storybook, rendered live. Open Code to copy one.

Range

Figma Type=Range: two thumbs named "Minimum" and "Maximum" (translate thumbLabels).

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

export function Range() {
  return (
    <Slider
      type="range"
      label="Salary band"
      maxValue={500}
      step={10}
      defaultValue={[250, 420]}
      minLabel="0"
      maxLabel="500k"
      formatOptions={{ notation: "compact" }}
      name="band"
    />
  );
}

Stepped

Figma Type=Stepped: a dot at every step.

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

const days = { style: "unit", unit: "day", unitDisplay: "long" } as const;

<Slider
  label="Notice period"
  maxValue={90}
  defaultValue={30}
  minLabel="0"
  maxLabel="90 days"
  formatOptions={days}
  type="stepped"
  step={10}
/>;

With input

Figma Type=With input: the number field edits the same value (typing is an alternative to dragging).

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

export function WithInput() {
  return (
    <div className="max-w-[17.5rem]">
      <Slider
        type="with-input"
        label="Weekly hours"
        defaultValue={40}
        inputSuffix="h"
        minLabel="0"
        maxLabel="100 h"
      />
    </div>
  );
}

Disabled

Figma State=Disabled for every type.

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

export function Disabled() {
  return (
    <div className="flex flex-col gap-8">
      <Slider label="Notice period" isDisabled defaultValue={40} minLabel="0" maxLabel="100" />
      <Slider type="range" label="Salary band" isDisabled defaultValue={[30, 70]} />
      <Slider type="stepped" label="Seniority" step={10} isDisabled defaultValue={30} />
      <Slider type="with-input" label="Weekly hours" inputSuffix="h" isDisabled defaultValue={70} />
    </div>
  );
}

Long label

Long labels wrap; the value stays at the end of the header.

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

const days = { style: "unit", unit: "day", unitDisplay: "long" } as const;

<Slider
  label="Notice period after the end of the probation, in calendar days"
  maxValue={90}
  defaultValue={30}
  minLabel="0"
  maxLabel="90 days"
  formatOptions={days}
/>;

Right to left

Right-to-left: the minimum is on the right, the fill grows leftwards and the arrow keys follow the reading direction.

Loading example…

app.tsx

import { Slider } from "@nexera-ui/react";

const days = { style: "unit", unit: "day", unitDisplay: "long" } as const;

<Slider
  label="فترة الإشعار"
  maxValue={90}
  defaultValue={30}
  minLabel="0"
  maxLabel="90 يوما"
  formatOptions={days}
/>;

Props 22

Press "Try it" on a card to load that prop into the playground.

minLabelNexera

ReactNode

Text under the start of the track, for example "0". Shown with maxLabel when either is provided.

maxLabelNexera

ReactNode

Text under the end of the track, for example "90 days".

inputSuffixNexera

ReactNode

The unit after the number of a with-input slider, for example "h". Read as the number field's description.

thumbLabelsNexera

readonly [string, string]

Accessible names of the two thumbs of a range slider. Translate them.

nameNexera

string

Form field name of the thumb input(s); a range submits two values under this name.

classNameNexera

string

Extra classes for the root, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the root.

typeNexera

"single" | "stepped" | "with-input" | "range"

Layout: single (one thumb), stepped (one thumb with a dot at every step), with-input (one thumb and a number field for typing the value), or range. Two thumbs and the fill between them.

valueNexera

number | readonly [number, number]

The value. Controlled; pair it with onChange. The [start, end] values. Controlled; pair it with onChange.

defaultValueNexera

number | readonly [number, number]

The initial value when uncontrolled. The initial values when uncontrolled.

onChangeNexera

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

Called on every change (each step of a drag or key press, or a committed number). Called on every change with [start, end].

onChangeEndNexera

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

Called when the user lets go of the thumb, after a key press, or when the number field commits. Called when the user lets go of a thumb or after a key press, with [start, end].

labelNexera

ReactNode

Visible label, for example "Notice period". Wraps; names the slider.

aria-labelNexera

string

Accessible name when no label is shown. Translate it.

aria-labelledbyNexera

string

Id(s) of the visible element(s) that name the slider.

isDisabledReact Aria

boolean

Whether the whole Slider is disabled.

minValueReact Aria

number

The slider's minimum value.

maxValueReact Aria

number

The slider's maximum value.

stepReact Aria

number

The slider's step value.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

formatOptionsReact Aria

NumberFormatOptions

The display format of the value label.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 6 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.11Non-text ContrastLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.7Dragging MovementsLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled

Usage

<Slider className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

No block uses Slider yet.

Theme studio

Slider

Try every prop. Copy the code.

Examples 6

Range

Stepped

With input

Disabled

Long label

Right to left

Props 22

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components