docs / core / slider

Slider

one number, picked along a track by feel: a speed, an opacity, a blur radius. when the exact digits matter, ask with Input instead.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

settings rows, filter panels, anywhere a value is tuned by feelpair label with showValue so the number stays visible while draggingnot a range picker. one thumb, one numbernot a substitute for a typed field when precision matters

a11y

role="slider" named by its label · arrow keys, Home and End move the thumb · focus ring on the thumbjest-axe

dependencies

@base-ui/react · class-variance-authority
live demo · try it out
Opacity
80%
customize
labeltext above the track
sizesm is for dense rows
minlower bound
0
maxupper bound
100
stepincrement per tick
5
defaultValuestarting position
80
suffixunit appended to the readout
showValuevalue readout on the right
disableddims and ignores input
usagecopy
import { Slider } from "@usva-ui/react/primitives/slider";

<Slider
  label="Opacity"
  defaultValue={80}
  step={5}
  showValue
  formatValue={(v) => `${v}%`}
/>

props

proptypedefaultnotes
valuenumber—controlled value.
defaultValuenumber—initial value when uncontrolled.
onValueChange(value: number, event) => void—fires on every change, mid-drag and per key press. use onValueCommitted for release only.
minnumber0lower bound.
maxnumber100upper bound.
stepnumber1increment per arrow key press and per drag tick.
disabledbooleanfalsedims to 50% and ignores pointer and keyboard.
labelReactNode—label above the track. also names the slider for screen readers.
showValueboolean—current value on the right of the label row.
formatValue(value: number) => string—formats the readout. without it, Base UI's own formatting is used.
size"sm" | "md""md"track and thumb size. sm is for dense rows.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Slider } from "@usva-ui/react/primitives/slider";

<Slider label="Speed" defaultValue={40} step={5} showValue />