Slider

A draggable range input for numeric values within a min–max range. Supports both continuous and stepped modes.

When to use: Volume, brightness, price range, playback position, zoom level — any scalar value the user adjusts by feel.

When not to use: Precise numeric entry — use Input with a numeric keyboard. Binary choices — use Switch. Discrete options — use Radio.

Import

import { Slider } from '@/components';

Usage

<Slider
  value={volume}
  onValueChange={setVolume}
  minimumValue={0}
  maximumValue={100}
  step={1}
  accessibilityLabel="Volume"
/>

Props

Prop	Type	Default	Description
value	number	—	Controlled value (required)
onValueChange	(value: number) => void	—	Change handler (required)
accessibilityLabel	string	—	Screen reader description (required)
minimumValue	number	0	Minimum value
maximumValue	number	1	Maximum value
step	number	0 (continuous)	Step increment
isDisabled	boolean	false	Prevents interaction
testID	string	—	For testing

Continuous vs. stepped

// Continuous — any value between 0 and 1
<Slider value={opacity} onValueChange={setOpacity} minimumValue={0} maximumValue={1} accessibilityLabel="Opacity" />

// Stepped — integer values only
<Slider value={rating} onValueChange={setRating} minimumValue={1} maximumValue={5} step={1} accessibilityLabel="Rating" />

Accessibility

• accessibilityLabel is required — announces what the slider controls
• Screen readers can increment/decrement the value using accessibility actions

Related

• Input — precise numeric entry
• Switch — binary control