ComponentsForms

Slider

Pick a number or a range by dragging or with the arrow keys.

Playground

<Slider defaultValue={[40]} aria-label="Volume" />

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i @junco/react @junco/tailwind

import { Slider } from "@junco/react";

<Slider value={[minutes]} onValueChange={([m]) => setMinutes(m)} max={120} step={5} aria-label="Session length" />

Examples#

Range#

Two values make two thumbs. Name each one with thumbLabels.

Page count5–30 pages

In a Field#

Inside a Field the thumb takes its name from the label.

Daily goal

Minutes of study a day.

API reference#

`Slider`#

value / defaultValue: One number per thumb.; number[]
onValueChange: Called while dragging or on each key press.; (value: number[]) => void
onValueCommit: Called when the user lets go.; (value: number[]) => void
min / max / step: The scale.; number; Default: 0 / 100 / 1
thumbLabels: An accessible name per thumb. One thumb can use aria-label instead.; string[]
getValueLabel: What screen readers say for a value, e.g. "45 minutes".; (value: number) => string
size: Track and thumb size.; "sm" | "md"; Default: "md"
orientation: Direction.; "horizontal" | "vertical"; Default: "horizontal"
disabled: Not focusable or draggable.; boolean; Default: false
classNames: Slot overrides.; { root?; track?; range?; thumb? }

Prop	Type	Default
`value / defaultValue` One number per thumb.	`number[]`	`–`
`onValueChange` Called while dragging or on each key press.	`(value: number[]) => void`	`–`
`onValueCommit` Called when the user lets go.	`(value: number[]) => void`	`–`
`min / max / step` The scale.	`number`	`0 / 100 / 1`
`thumbLabels` An accessible name per thumb. One thumb can use aria-label instead.	`string[]`	`–`
`getValueLabel` What screen readers say for a value, e.g. "45 minutes".	`(value: number) => string`	`–`
`size` Track and thumb size.	`"sm" \| "md"`	`"md"`
`orientation` Direction.	`"horizontal" \| "vertical"`	`"horizontal"`
`disabled` Not focusable or draggable.	`boolean`	`false`
`classNames` Slot overrides.	`{ root?; track?; range?; thumb? }`	`–`

Accessibility#

Keyboard interactions
Key	Action
`←→`	Moves by one step (↑ and ↓ too).
`Page UpPage Down`	Moves by ten steps.
`HomeEnd`	Jumps to the minimum or maximum.

Each thumb is role=slider with its own name and value.
Use getValueLabel when the number alone isn't meaningful (units, ranges).
Focus shows a ring around the thumb.

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i @junco/react @junco/tailwind

import { Slider } from "@junco/react";

<Slider value={[minutes]} onValueChange={([m]) => setMinutes(m)} max={120} step={5} aria-label="Session length" />

API reference#

`Slider`#

value / defaultValue: One number per thumb.; number[]
onValueChange: Called while dragging or on each key press.; (value: number[]) => void
onValueCommit: Called when the user lets go.; (value: number[]) => void
min / max / step: The scale.; number; Default: 0 / 100 / 1
thumbLabels: An accessible name per thumb. One thumb can use aria-label instead.; string[]
getValueLabel: What screen readers say for a value, e.g. "45 minutes".; (value: number) => string
size: Track and thumb size.; "sm" | "md"; Default: "md"
orientation: Direction.; "horizontal" | "vertical"; Default: "horizontal"
disabled: Not focusable or draggable.; boolean; Default: false
classNames: Slot overrides.; { root?; track?; range?; thumb? }

Prop	Type	Default
`value / defaultValue` One number per thumb.	`number[]`	`–`
`onValueChange` Called while dragging or on each key press.	`(value: number[]) => void`	`–`
`onValueCommit` Called when the user lets go.	`(value: number[]) => void`	`–`
`min / max / step` The scale.	`number`	`0 / 100 / 1`
`thumbLabels` An accessible name per thumb. One thumb can use aria-label instead.	`string[]`	`–`
`getValueLabel` What screen readers say for a value, e.g. "45 minutes".	`(value: number) => string`	`–`
`size` Track and thumb size.	`"sm" \| "md"`	`"md"`
`orientation` Direction.	`"horizontal" \| "vertical"`	`"horizontal"`
`disabled` Not focusable or draggable.	`boolean`	`false`
`classNames` Slot overrides.	`{ root?; track?; range?; thumb? }`	`–`

Accessibility#

Keyboard interactions
Key	Action
`←→`	Moves by one step (↑ and ↓ too).
`Page UpPage Down`	Moves by ten steps.
`HomeEnd`	Jumps to the minimum or maximum.

Each thumb is role=slider with its own name and value.

Use getValueLabel when the number alone isn't meaningful (units, ranges).

Focus shows a ring around the thumb.

Playground#

Usage#

Examples#

Range#

In a Field#

API reference#

Slider#

Accessibility#

Playground#

Usage#

Examples#

Range#

In a Field#

API reference#

Slider#

Accessibility#

`Slider`#

`Slider`#