Slider

01Preview

Change the controls to try every supported combination. Drag a thumb, press the track, or tab to a thumb and use the arrow keys.

const [value, setValue] = useState(25)

<Slider
  label="Daily study goal"
  max={60}
  step={5}
  value={value}
  onValueChange={setValue}
  formatValue={(v) => `${v} min`}
  showValue
  tooltip="auto"
/>

02Installation

pnpm add @nuton/ui @nuton/tokens

npm install @nuton/ui @nuton/tokens

yarn add @nuton/ui @nuton/tokens

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { RangeSlider, Slider } from '@nuton/ui'

<Slider
  label="Daily study goal"
  min={10}
  max={120}
  step={5}
  value={goal}
  onValueChange={setGoal}
  onValueCommit={saveGoal}
  showValue
  formatValue={(v) => `${v} min`}
/>

<RangeSlider label="Lesson length" max={60} step={5} value={range} onValueChange={setRange} />

• Use Slider for one value and RangeSlider for a start and end. Each thumb is a native <input type="range">, so forms, mobile screen readers and the keyboard work without extra code.
• Use a slider when an approximate value is fine. When people need an exact number, use an Input (you can pair both).
• Save on onValueCommit (pointer released or key pressed), not on every onValueChange while dragging.
• Give every slider a label, a Field, or aria-label. Use getValueText when the number alone doesn't say enough (“1.5 times speed”, “Focused, 3 of 4”).
• Keep mark labels short. They are hidden from screen readers, so say the same thing in getValueText.

04Variants and sizes

Sizes

<Slider label="Medium (default)" defaultValue={40} />
<Slider label="Small" size="sm" defaultValue={40} />

Range (two thumbs)

<RangeSlider label="Lesson length" max={60} step={5} defaultValue={[10, 30]} showValue />

Marks, formatted values and the value bubble

Marks add ticks on the track and optional labels under it. formatValue sets the visible text; getValueText sets what screen readers say.

<Slider
  label="Playback speed"
  min={0.5}
  max={2}
  step={0.25}
  defaultValue={1}
  showValue
  formatValue={(v) => `${v}x`}
  getValueText={(v) => `${v} times speed`}
  marks={[{ value: 0.5, label: '0.5x' }, { value: 1, label: '1x' }, { value: 1.5, label: '1.5x' }, { value: 2, label: '2x' }]}
/>

<Slider aria-label="Volume" defaultValue={60} tooltip="always" />

Vertical

Vertical sliders grow upwards. Set the length with --nu-slider-length (default 200px). Code-only: Figma has no vertical slider.

<Slider
  aria-label="Text size"
  orientation="vertical"
  min={12}
  max={24}
  step={2}
  defaultValue={16}
  tooltip="auto"
  formatValue={(v) => `${v}px`}
  marks={[{ value: 12, label: 'Small' }, { value: 24, label: 'Large' }]}
/>

05States and interactions

State tokens

Set on .nu-slider. Override them on a wrapper class to restyle a slider, as the Audio player does for its seek bar.

06Composition examples

Study settings

Each slider saves when the change is finished and confirms it in a status message. The difficulty slider uses words for its value.

<Slider
  label="Daily study goal"
  description="We'll remind you when you're close."
  min={10}
  max={120}
  step={5}
  value={goal}
  onValueChange={setGoal}
  onValueCommit={(v) => save('goal', v)}
  showValue
  formatValue={(v) => `${v} min`}
  getValueText={(v) => `${v} minutes`}
/>
<Slider
  label="Quiz difficulty"
  max={3}
  value={level}
  onValueChange={setLevel}
  onValueCommit={(v) => save('difficulty', v)}
  showValue
  formatValue={(v) => LEVELS[v]}
  getValueText={(v) => `${LEVELS[v]}, ${v + 1} of 4`}
  marks={LEVELS.map((label, value) => ({ value, label }))}
/>

Range filter

<RangeSlider
  label="Lesson length"
  max={60}
  step={5}
  value={range}
  onValueChange={setRange}
  showValue
  tooltip="auto"
  formatValue={(v) => `${v} min`}
  getValueText={(v, thumb) => `${thumb === 0 ? 'At least' : 'At most'} ${v} minutes`}
  labels={{ start: 'shortest', end: 'longest' }}
/>

Inside a Field

<Field label="Flashcard text size" hint="Applies to the front and back of every card.">
  <Slider min={12} max={24} step={2} value={size} onValueChange={setSize} tooltip="auto" formatValue={(v) => `${v}px`} />
</Field>

Audio player seek bar

The Audio player seek bar is a Slider with 5-second arrow steps, 1-minute Page steps and spoken times, restyled through the tokens above.

07API reference

Slider props

RangeSlider props

Shared props

Accessibility

You must: name every slider, give a spoken value with getValueText when the number isn't meaningful, and offer a text input where an exact value matters.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• Audio playerUses Slider for its seek bar.
• ProgressShows progress that people can’t change.
• FieldLabel, hint and error around a slider.