Default
Show the codeHide the code
Default, code
<Slider label="Volume" defaultValue={60} />Slider
Pick a value or a range on a scale by dragging or with the arrow keys. Thumbs have 44px hit areas.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Slider (multi-thumb)
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Range
Show the codeHide the code
Range, code
<Slider label="Price" defaultValue={[20, 80]} minValue={0} maxValue={200} step={5} thumbLabels={['Minimum price', 'Maximum price']} formatOptions={{ style: 'currency', currency: 'GBP', maximumFractionDigits: 0 }} />Disabled
Show the codeHide the code
Disabled, code
<Slider label="Volume" defaultValue={60} isDisabled />Tokens
The 15 design tokens Slider reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 15 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | … | --sd-color-action-primary |
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.canvas | … | --sd-color-bg-canvas |
| color.bg.muted | … | --sd-color-bg-muted |
| color.border.control | … | --sd-color-border-control |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| control.indicator | … | --sd-control-indicator |
| elevation.1 | … | --sd-elevation-1 |
| field.label | … | --sd-field-label |
| radius.full | … | --sd-radius-full |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Slider } from "@superduperui/react"Props
Slider also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Visible label (required). For a range, also name each thumb with thumbLabels. |
thumbLabels | string[] | Names for the thumbs of a range slider, e.g. ["Minimum price", "Maximum price"]. |
showValue | booleanDefault true | Show the formatted value beside the label. Default true. |
When to use it
Use it for
- Rough values on a scale (volume, price range filters)
- Ranges with a minimum and a maximum
Use something else for
- Exact values people know: use NumberField
- A few named steps: use SegmentedControl or RadioGroup
Accessibility
Screen readers announce "Minimum price, £20, slider".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Name each thumb of a range (thumbLabels)
- Pair a slider with a NumberField when exact values matter
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 80 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 95 text runs: 0 below 7:1, lowest 16.71:1 |
| Target size | 16 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 6 of 6, Firefox 6 of 6, WebKit 6 of 6 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the first thumb |
| ArrowRight | Right increases by one step |
| PageUp | Page Up increases by a larger step |
| Home | Home goes to the minimum |
| Tab | Tab moves to the second thumb |
| End | End goes to the maximum |
In Figma
The Figma component is Slider, with Type (Single, Range); State (Default, Hover, Focus, Dragging, Disabled); Fill (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 20 to 80, 0 to 25, 0 to 50, 0 to 75, 0 to 100, 25 to 50, 25 to 75, 25 to 100, 50 to 75, 50 to 100, 75 to 100). The Figma library isn’t published yet.
Figma to code: Type (Single = defaultValue (number), Range = defaultValue ([min, max])); State (Default, Hover, Focus, Dragging, Disabled = isDisabled); Label → label; Show value → showValue; Value → (generated from the value and formatOptions) when Show value; Range value → (generated: "<start> to <end>") when Show value and Type=Range; Fill → defaultValue (0 = 0, 10 = 10, 20 = 20, 30 = 30, 40 = 40, 50 = 50, 60 = 60, 70 = 70, 80 = 80, 90 = 90, 100 = 100, 20 to 80 = [20,80], 0 to 25 = [0,25], 0 to 50 = [0,50], 0 to 75 = [0,75], 0 to 100 = [0,100], 25 to 50 = [25,50], 25 to 75 = [25,75], 25 to 100 = [25,100], 50 to 75 = [50,75], 50 to 100 = [50,100], 75 to 100 = [75,100]).