Inputs · §10.3

Slider

A continuous value, for the pain scale where a site prefers it.

Theme
Contrast
Language
Motion
Text size

Code

<Slider aria-labelledby="pain" max={10} min={0} value={pain} onValueChange={setPain} />

Accessibility

  • Labelled by the question; arrow keys change the value; the value is shown as a number.

Usage

Do

  • Only where a site prefers a slider.

Don't

  • Numeric buttons stay the default for the pain scale.

Platforms

Web
apps/web/components/ui/slider.tsx
iOS
SwiftUI Slider
Android
Compose Slider