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.

Android

iOS

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

SliderExample.tsx

复制

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

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

  return (
    <View>
      <Slider value={value} onValueChange={setValue} />
      <Text style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
        Value: {value.toFixed(3)}
      </Text>
    </View>
  );
}

Android

iOS

API

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

No API data file found, sorry!