---
modificationDate: June 29, 2026
title: Slider
description: A slider compatible with @react-native-community/slider.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-57/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'ios', 'web', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v57.0.0/sdk/ui/drop-in-replacements/slider/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Reference (v57.0.0) > Expo UI > Drop-in replacements
Pages in this section:
- [Overview](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements.md)
- [BottomSheet](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/bottomsheet.md)
- [DateTimePicker](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/datetimepicker.md)
- [MaskedView](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/maskedview.md)
- [Menu](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/menu.md)
- [PagerView](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/pagerview.md)
- [Picker](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/picker.md)
- [SegmentedControl](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/segmentedcontrol.md)
- [Slider](https://docs.expo.dev/versions/v57.0.0/sdk/ui/drop-in-replacements/slider.md) (this page)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

# Slider

A slider compatible with @react-native-community/slider.
Android, iOS, Web, Included in Expo Go

A `Slider` component with an API compatible with [`@react-native-community/slider`](https://www.npmjs.com/package/@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](/versions/v57.0.0/sdk/ui/jetpack-compose/slider.md)
-   **iOS**: [SwiftUI Slider](/versions/v57.0.0/sdk/ui/swift-ui/slider.md)

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

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) 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

```tsx
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

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

## Component

### `Slider`

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[SliderProps](#sliderprops)\>

A drop-in replacement for `@react-native-community/slider`. Renders a SwiftUI `Slider` on iOS, a Material 3 `Slider` on Android, and a native HTML `<input type="range">` on web.

Props for the `Slider` community drop-in component. Compatible with `@react-native-community/slider`.

SliderProps

### `disabled`

Optional • Type: `boolean` • Default: `false`

If true the user won't be able to move the slider.

### `inverted`

Optional • Type: `boolean` • Default: `false`

Reverses the direction of the slider so the maximum value is on the left and the minimum value is on the right.

### `lowerLimit`

Optional • Type: `number`

The lower limit value of the slider. The user won't be able to slide below this limit.

### `maximumTrackTintColor`

Supported platforms: Android.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Color of the track to the right of the thumb.

### `maximumValue`

Optional • Type: `number` • Default: `1`

Initial maximum value of the slider.

### `minimumTrackTintColor`

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Color of the track to the left of the thumb.

### `minimumValue`

Optional • Type: `number` • Default: `0`

Initial minimum value of the slider.

### `onValueChange`

Optional • Type: `(value: number) => void`

Callback continuously called while the user is dragging the slider.

### `step`

Optional • Type: `number` • Default: `0`

Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). A value of 0 means continuous (no snapping).

### `style`

Optional • Type: StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)\>

Used to style and layout the Slider.

### `thumbTintColor`

Supported platforms: Android.

Optional • Type: [ColorValue](https://reactnative.dev/docs/colors)

Color of the thumb.

### `upperLimit`

Optional • Type: `number`

The upper limit value of the slider. The user won't be able to slide above this limit.

### `value`

Optional • Type: `number` • Default: `0`

Initial / current value of the slider. Behaves like the community lib: passing a new value updates the thumb, but live drag emits via `onValueChange` without needing external state.