Slider

Atom
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.
src/atoms/slider
View in Controls

Playground

Every control sets a real prop of SliderProps. The JSX below updates as you go.
Glass intensity
62
Props
value
number
62
showValue
boolean
Size
pick one
disabled
boolean
children
string
JSX · SliderProps
<Slider value={62} showValue>Glass intensity</Slider>

Variants

7 examples from src/atoms/slider/slider.md, each rendered live from its own JSX.
Volume
With label
<Slider defaultValue={65}>Volume</Slider>
Volume
Applies to alert sounds.
With description
<Slider defaultValue={40} description="Applies to alert sounds.">Volume</Slider>
Small
<Slider small accessibilityLabel="Volume" defaultValue={40} />
Large
<Slider large accessibilityLabel="Volume" defaultValue={75} />
Stepped
<Slider accessibilityLabel="Playback speed" defaultValue={6} max={10} step={2} />
Disabled
<Slider disabled accessibilityLabel="Volume" defaultValue={30} />
xs step, pinned to the start (320)
lg step, pinned to the start (512)
Bare, in an lg Container: fills it (512)
Measure
<Column>
<Slider xs start defaultValue={40}>xs step, pinned to the start (320)</Slider>
<Slider lg start defaultValue={40}>lg step, pinned to the start (512)</Slider>
<Container lg start><Slider defaultValue={40}>Bare, in an lg Container: fills it (512)</Slider></Container>
</Column>

Sizes

Glass intensity
62
small
Glass intensity
62
default
Glass intensity
62
large

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Glass intensity
62
default
Glass intensity
62
hover
Glass intensity
62
focus
Glass intensity
62
disabled

Anatomy

Glass intensity
62
1
Track
2
Fill
3
Thumb
4
Label
5
Value
Dimmed parts appear only in some states or variants.

Props

18 props on SliderProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
13 props
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
0
Lower bound of the range. Default 0.
max
number
100
Upper bound of the range. Default 100.
step
number
1
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
false
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.
percent
boolean
false
The value is a percentage: the showValue readout prints it with a percent sign ("62%") and assistive tech hears it so. Pair with the default 0 to 100 range.
scale
boolean
false
A scale under the track: the minimum, the middle and the maximum, spread across the track's width in the small mono meta type, 8 px below the rail.
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.
Size
pick one
2 props
small
boolean
false
large
boolean
false
State
3 props
disabled
boolean
false
State.
accessibilityLabel
string
–
Accessible name for the slider (e.g. "Volume").
style
LayoutStyle
–
Extra style on the slider container, applied last.
MeasureProps · width steps xxxs 192 · xxs 256 · xs 320 · sm 384 · md 448 · lg 512 · xl 576 · xxl 672 · xxxl 768 · wide 896 · wider 1024 · widest 1152 · page 1280, plus start to pin to the leading edge.

Accessibility and keyboard

Keyboard
ArrowRight
ArrowUp
One step up
ArrowLeft
ArrowDown
One step down
PageUp
PageDown
A larger step
Home
End
Minimum · maximum
Semantics
Roles
adjustable
States
disabled
ARIA on web
aria-disabled
aria-hidden
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.
From the docs
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.
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Volume
Web
control 10 · field 10 · card 16 · Instrument Sans
Volume
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Volume
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

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 look: on the web a 20 px white thumb (16 small, 26 large) on a 6 px rail (4, 8) whose accent range glows, ringed in the accent's soft wash while a pointer hovers or presses it, under a 13 px title with the value in the mono face; on Android Material 3 Expressive's split 16dp track (24dp large) and 4dp bar handle.
<Slider accessibilityLabel="Volume" defaultValue={60} />
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.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ion
--ion-glow
--sf4
--tx2

Related components