---
modificationDate: May 12, 2026
title: Slider
description: A slider compatible with @react-native-community/slider.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/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/v56.0.0/sdk/ui/drop-in-replacements/slider/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# Slider

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

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

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/v56.0.0/sdk/ui/jetpack-compose/slider)
-   **iOS**: [SwiftUI Slider](/versions/v56.0.0/sdk/ui/swift-ui/slider)

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

## Installation

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

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

Supported platforms: Android, iOS, Web.

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

A drop-in replacement for `@react-native-community/slider` on web. Renders a native HTML `<input type="range">` element.

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

SliderProps

### `disabled`

Supported platforms: Android, iOS, Web.

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

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

### `inverted`

Supported platforms: Android, iOS, Web.

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`

Supported platforms: Android, iOS, Web.

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`

Supported platforms: Android, iOS, Web.

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

Initial maximum value of the slider.

### `minimumTrackTintColor`

Supported platforms: Android, iOS, Web.

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

Color of the track to the left of the thumb.

### `minimumValue`

Supported platforms: Android, iOS, Web.

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

Initial minimum value of the slider.

### `onValueChange`

Supported platforms: Android, iOS, Web.

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

Callback continuously called while the user is dragging the slider.

### `step`

Supported platforms: Android, iOS, Web.

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`

Supported platforms: Android, iOS, Web.

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`

Supported platforms: Android, iOS, Web.

Optional • Type: `number`

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

### `value`

Supported platforms: Android, iOS, Web.

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.