Slider

Filters

Reset

Price$40 – $180

$0$250

DistanceWithin 5 km

Rating4+

12345

Delivery timeUnavailable

Installation

npx axiom add slider

pnpm dlx axiom add slider

yarn dlx axiom add slider

bun x axiom add slider

Installs: react-native-reanimated, react-native-worklets, react-native-gesture-handler.

The value logic and gestures live in use-slider.ts, shared by every styling variant. Colors come from slider.default.{default,disabled}.{track,fill,thumb} in the component tokens.

Usage

import { Slider } from '@/components/ui/slider';

<Slider value={volume} onValueChange={setVolume} />
<Slider value={[min, max]} onValueChange={setPriceRange} />

Props

Prop	Type	Default	Description
`value`	`number \| [number, number]`	—	A number for one thumb, a tuple for a range with two thumbs.
`defaultValue`	`number \| [number, number]`	`min`	Initial value when the slider manages its own state.
`onValueChange`	`(value) => void`	—	Called continuously while dragging. Runs on the JS thread, so keep it cheap.
`onSlidingComplete`	`(value) => void`	—	Called once when the finger lifts. Use it for expensive work: a request, a refetch.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Increment the value snaps to. `0` means continuous.
`minRange`	`number`	`0`	Smallest gap between the two thumbs of a range.
`showSteps`	`boolean`	`false`	Draws a tick for each step. Only use it when there are few steps.
`disabled`	`boolean`	`false`	Blocks dragging and dims the slider.
`accessibilityLabel`	`string`	—	What the slider controls. Screen reader users change it with swipe up and down, by one `step`.
`getAccessibilityValue`	`(value) => string`	—	Text announced for the value, such as `"5 kilometers"`.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the container.

The thumb is 20pt but its touch area is 44pt, and the whole track accepts a tap to jump to a value.

Use cases

Media volume

A continuous slider between two icons that show the direction.

Clair de luneDebussy

<Slider
	value={volume}
	onValueChange={setVolume}
	min={0}
	max={1}
	step={0}
	accessibilityLabel="Volume"
	getAccessibilityValue={(v) => `${Math.round(v * 100)} percent`}
/>

Price range filter

Two thumbs with a minRange, and the request only sent when the user lets go.

Price per night

Minimum

$80

Maximum

$240

128 stays in this range

<Slider
	value={range}
	onValueChange={setRange}
	onSlidingComplete={(r) => refetch({ minPrice: r[0], maxPrice: r[1] })}
	min={0}
	max={500}
	step={10}
	minRange={20}
/>

Discrete steps

A small step count with showSteps, for a value with a few meaningful levels.

Text size

····

Apps that support Dynamic Type will adjust to your preferred reading size.

<Slider
	min={0}
	max={3}
	step={1}
	showSteps
	value={level}
	onValueChange={setLevel}
	accessibilityLabel="Text size"
/>

SegmentedControl

Slider

On this page