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

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

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';

No API data file found, sorry!