Slider

Drag (or tap) along a track to pick a value in a range; the keyboard and screen readers step it too. Controlled by value, bounded by min / max, and snapped to step.
Like the other input-like controls, a slider fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure.
Pass ref to access the interactive adjustable track, including when a header is shown. Use useRef<ComponentRef<typeof Slider>>(null) from React, or useRef<View>(null) with React Native's View type. Object and callback refs are supported and detach on unmount. Calling ref.current?.focus() or .blur() delegates to the host without activating the control. Browser focus is supported; native focus depends on the platform and React Native version, and is separate from accessibility focus.
Name the setting with string children, or pass accessibilityLabel when the visible title is omitted or contains rich content.
iOS
Android
Web
tsx
<Slider accessibilityLabel="Volume" defaultValue={60} />
In glass mode the handle is a control-layer glass knob whose position is the authoritative value at every frame (a controlled value or a release can never lag behind the rail). Tapping the track puts the handle on the tapped value at once. The rail, the filled range, the value label and the hit target stay fixed. A disabled slider is inert; solid mode keeps the skin's own handle.
On iOS 26 the handle is a real Apple Liquid Glass control, with the material's edge-lensing and specular showing on a physical device. This is automatic from the glass surface, the platform default there, so there is no prop to set; under a solid surface, Reduce Transparency, or Increase Contrast the handle falls back to a solid knob. The Android and web handles keep their own native look.

Props

Prop
Description
value
number
Controlled value; omit for uncontrolled use. The thumb sits at this value (clamped to [min, max]).
defaultValue
number
Initial value for uncontrolled use (a bare <Slider/> drags out of the box). Default `min`.
min
number
Lower bound of the range. Default 0.
max
number
Upper bound of the range. Default 100.
step
number
Snap increment. Default 1. Set to a fraction for finer control.
onChange
(value: number) => void
Fired with the next (clamped, snapped) value as the thumb is dragged or the track tapped (both modes).
testID
string
E2E hook forwarded to the slider container.
children
ReactNode
The title line, rendered ABOVE the track (a slider's label sits above the rail, not beside it). Supplying it builds the component-owned header so the caller never hand-composes a Column + Typography above a bare slider, and the visible title also names the control for assistive tech (see `accessibilityLabel`).
description
ReactNode
Optional muted secondary line rendered under the title, for a hint or unit note.
showValue
boolean
Render the live current value (the same value the thumb sits at) as a trailing readout on the title line, right-aligned. With no title it still renders the value as a standalone trailing readout above the track. The number tracks the drag in real time and uses tabular figures so it does not jitter.
small
boolean
Size (pick one; default is the standard track + thumb).
large
boolean
Size (pick one; default is the standard track + thumb).
disabled
boolean
State.
accessibilityLabel
string
Accessible name for the slider (e.g. "Volume").
style
LayoutStyle
Extra style on the slider container, applied last.
xxxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xs
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
sm
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
md
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
lg
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
xxxl
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wide
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
wider
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
widest
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
page
boolean
Measure (pick one; omit to take the parent's bounds). Caps the component at a step of the width scale, centered in its column; `start` pins it to the leading edge.
start
boolean
Pin a capped component to the leading edge instead of centering it in its column.
ref
React.Ref<View>
Ref to the interactive adjustable track, including when a header is shown. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.

Do & Don’t

Range

Don’t
Cramming the slider into a tiny width leaves no travel, so the thumb can barely move and the value is hard to set.
Do
Volume
Give the track room to breathe so the thumb has a clear travel path and the value reads at a glance. Pass the label as children; the slider owns the title above the rail.

Bounds

Don’t
A slider with no readout and no visible label leaves users guessing what the value is and what it controls.
Do
Volume
48
Pair the slider with its current value so the number is explicit, not just inferred from the thumb position. showValue renders the live readout above the track.

State

Don’t
Don't fake a disabled slider with a faint inline track; the real disabled prop also blocks the gesture and sets accessibility state.
Do
Use the disabled state for values the user cannot change yet; it dims clearly so it does not look interactive.

Keyboard

Don’t
Leave the slider unnamed. It still takes focus and shows the ring, but a screen reader announces a bare number with nothing to say what it sets.
Do
Name the slider and let it take keyboard focus. Tab lands on it and its thumb wears the kit's 2 px focus ring in the theme's ring colour, over the glass knob too; the arrows, Page Up, Page Down, Home and End then set the value. A click shows no ring.
← Skeleton
Spinner →