Slider
- Stable
- WCAG 2.2 evidence
- RTL
The track of a slider: rail, fill, optional step ticks and one thumb per value, with the value
bubble shown while a thumb is dragged. Figma's Value (0 to 100) and State variants are renderings of the slider's
state, not props. Slider renders it for you; render it yourself only inside a React Aria Slider. Built on React Aria SliderTrack, SliderFill and SliderThumb: each thumb is a focusable range input with
aria-valuenow and a localised aria-valuetext; arrows, Page Up / Page Down and Home / End move it, and pressing the
track moves the nearest thumb there, so dragging is never required (WCAG 2.1.1, 2.5.7, 4.1.2). The thumb has a 24 px
pointer target (2.5.8). Horizontal only; RTL reverses the direction.
import { SliderTrack } from "@nexera-ui/react";- 3
- examples
- 5
- props
- 1
- live controls
- 1
- platform
- 9
- 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.
import { SliderTrack } from "@nexera-ui/react";
<SliderTrack />Examples 2
The same examples as Storybook, rendered live. Open Code to copy one.
With ticks
Show ticks: a dot at every step (here step={10}).
import { SliderTrack } from "@nexera-ui/react";
<SliderTrack ticks />;
Right to left
Right-to-left: the fill and the ticks start on the right.
import { AriaSlider } from "react-aria-components";
import { SliderTrack } from "@nexera-ui/react";
export function RightToLeft() {
return (
<AriaSlider aria-label="القيمة" defaultValue={30} step={10} className="w-[12.5rem]">
<SliderTrack />
</AriaSlider>
);
}
Props 5
Press "Try it" on a card to load that prop into the playground.
5 props shown
ticksNexerabooleanDraw a dot at every step of the slider. Decorative. Drawn only when the range has at most 51 steps.
thumbLabelsNexerareadonly string[]Accessible names of the thumbs when there are two or more (a range), for example ["Minimum salary", "Maximum
salary"]. A single thumb is named by the slider's label. Translate them.
nameNexerastringForm field name of every thumb's hidden range input (a range submits two values under the same name).
classNameNexerastringExtra classes for the track, merged last so they win over the defaults.
styleNexeraCSSPropertiesInline style for the track.
* 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 · 4 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.3.2Meaningful SequenceLevel A · supporting test
- 1.4.11Non-text ContrastLevel 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.
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-disableddata-draggingdata-hovered
<SliderTrack className="data-disabled:opacity-90 shadow-sm" />Used in blocks
No block uses SliderTrack yet.
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.