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

Slider

A Jetpack Compose Slider component for selecting values from a range.

Android

GitHub

npm

Changelog

Expo UI Slider matches the official Jetpack Compose Slider API and allows selecting values from a bounded range.

Installation

Terminal

- npx expo install @expo/ui

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

Usage

Basic slider

BasicSliderExample.tsx

import { useState } from 'react';
import { Host, Slider } from '@expo/ui/jetpack-compose';

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

  return (
    <Host matchContents>
      <Slider value={value} onValueChange={setValue} />
    </Host>
  );
}

Slider with custom range

Use the min and max props to define the slider's value range.

CustomRangeSliderExample.tsx

import { useState } from 'react';
import { Host, Slider } from '@expo/ui/jetpack-compose';

export default function CustomRangeSliderExample() {
  const [value, setValue] = useState(50);

  return (
    <Host matchContents>
      <Slider value={value} min={0} max={100} onValueChange={setValue} />
    </Host>
  );
}

Slider with steps

Use the steps prop to define discrete increments. Set steps to 0 for continuous values.

SteppedSliderExample.tsx

import { useState } from 'react';
import { Host, Slider } from '@expo/ui/jetpack-compose';

export default function SteppedSliderExample() {
  const [value, setValue] = useState(0);

  return (
    <Host matchContents>
      <Slider value={value} min={0} max={100} steps={10} onValueChange={setValue} />
    </Host>
  );
}

API

import { Slider } from '@expo/ui/jetpack-compose';

Component

`Slider`

Android

Type: React.Element<SliderProps>

SliderProps

`color`

Android

Optional • Type: ColorValue

Slider color.

`elementColors`

Android

Optional • Type: SliderElementColors

Colors for slider's core elements.

`max`

Android

Optional • Type: number • Default: 1

The maximum value of the slider. Updating this value does not trigger callbacks if the current value is above max.

`min`

Android

Optional • Type: number • Default: 0

The minimum value of the slider. Updating this value does not trigger callbacks if the current value is below min.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`onValueChange`

Android

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

Callback triggered on dragging along the slider.

`steps`

Android

Optional • Type: number • Default: 0

The number of steps between the minimum and maximum values, 0 signifies infinite steps.

`value`

Android

Optional • Type: number • Default: 0

The current value of the slider.

Types

`SliderElementColors`

Android

Colors for slider's core elements.

Property	Type	Description
activeTickColor(optional)	`ColorValue`	-
activeTrackColor(optional)	`ColorValue`	-
inactiveTickColor(optional)	`ColorValue`	-
inactiveTrackColor(optional)	`ColorValue`	-
thumbColor(optional)	`ColorValue`	-