This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

A Slider component with an API compatible with @react-native-community/slider. It uses a Material 3 Slider on Android, a SwiftUI Slider on iOS, and a native <input type="range"> element on web.

Under the hood this component wraps the platform-specific @expo/ui primitives:

• Android: Jetpack Compose Slider
• iOS: SwiftUI Slider

If you need lower-level control, use those primitives directly.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Migrating from @react-native-community/slider

• Update the import from import Slider from '@react-native-community/slider' to import Slider from '@expo/ui/community/slider'.
• onSlidingStart, onSlidingComplete, tapToSeek, StepMarker, renderStepNumber, thumbImage, minimumTrackImage, maximumTrackImage, trackImage, accessibilityUnits, accessibilityIncrements, testID, and ref.updateValue are not yet supported.
• On iOS, maximumTrackTintColor and thumbTintColor have no visual effect — SwiftUI's Slider only exposes the minimum (active) track tint. minimumTrackTintColor works on both platforms.

Basic usage

import { useState } from 'react';
import { Text, View } from 'react-native';
import Slider from '@expo/ui/community/slider';

export default function SliderExample() {
  const [value, setValue] = useState(0.5);

  return (
    <View>
      <Slider value={value} onValueChange={setValue} />
      <Text>Value: {value.toFixed(3)}</Text>
    </View>
  );
}

API

import Slider from '@expo/ui/community/slider';

Component