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

A slider component that allows users to select a value from a continuous range by dragging a thumb along a track.

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

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

<Slider
  style={{ minHeight: 60 }}
  value={value}
  onValueChange={(value) => {
    setValue(value);
  }}
/>

See official Jetpack Compose documentation for more information.

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