---
modificationDate: November 07, 2026
title: RangeSlider
description: A Jetpack Compose RangeSlider component for selecting two values on a track.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'expo-go']
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](https://docs.expo.dev/llms.txt) or append .md to any documentation URL.

> This is documentation for the next SDK version.

# RangeSlider

A Jetpack Compose RangeSlider component for selecting two values on a track.

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/unversioned/sdk/ui/jetpack-compose/range-slider/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/unversioned/sdk/ui/jetpack-compose/range-slider/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing.

You are here: Reference (unversioned) > Expo UI > Jetpack Compose (56 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>
Android, Included in Expo Go

`RangeSlider` wraps the Material 3 [RangeSlider](https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable). It lets users select a start and end value on one track. For a single value, use [`Slider`](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/slider.md).

## 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](https://docs.expo.dev/bare/overview.md), make sure to [install `expo`](https://docs.expo.dev/bare/installing-expo-modules.md) in your project.

## Usage

### Select a range

Render `RangeSlider` inside a `Host`. Use `startValue` and `endValue` for the selected endpoints and `trackRange` for the bounds of the entire track. Both bounds are inclusive.

```tsx
import { useState } from 'react';
import {
  Host,
  RangeSlider,
  type RangeSliderRange,
  Text,
  Column,
} from '@expo/ui/jetpack-compose';

export default function RangeSliderExample() {
  const [range, setRange] = useState<RangeSliderRange>({
    start: 20,
    endInclusive: 80,
  });

  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <Column>
        <Text>
          {Math.round(range.start)}–{Math.round(range.endInclusive)}
        </Text>
        <RangeSlider
          startValue={range.start}
          endValue={range.endInclusive}
          trackRange={{ start: 0, endInclusive: 100 }}
          onValueChange={setRange}
        />
      </Column>
    </Host>
  );
}
```

`onValueChange` receives `{ start, endInclusive }` as the user changes either endpoint. Compose keeps the endpoints within the track bounds and prevents the thumbs from crossing. Native interaction works without updating React state on every change. Changing the endpoint props updates the selection when the user is not dragging.

Use `onValueChangeFinished` for work that should run after an interaction, such as saving a filter. It has no value argument. Read the selection from `onValueChange`. With a keyboard, the completion callback runs each time the user releases a key that moves a thumb.

### Select discrete values

`steps` counts the selectable positions **between** the track bounds. On a track from `0` to `100`, `steps={9}` allows `0`, `10`, `20`, and so on through `100`. Use `steps={0}`, the default, for continuous selection.

```tsx
<RangeSlider
  startValue={20}
  endValue={80}
  trackRange={{ start: 0, endInclusive: 100 }}
  steps={9}
/>
```

### Customize colors

Use `colors` to override the thumb, track, and tick colors. `RangeSlider` shares [`SliderColors`](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/slider.md#slidercolors) with `Slider` and `VerticalSlider`. The active track is the section between the thumbs. Omitted colors use the Material theme. Set `enabled={false}` to disable interaction and use the disabled colors.

```tsx
<RangeSlider
  startValue={0.2}
  endValue={0.8}
  colors={{
    thumbColor: '#6750A4',
    activeTrackColor: '#6750A4',
    inactiveTrackColor: '#E8DEF8',
    disabledThumbColor: '#79747E',
    disabledActiveTrackColor: '#938F99',
  }}
/>
```

### Customize thumbs and track

Use `RangeSlider.StartThumb`, `RangeSlider.EndThumb`, and `RangeSlider.Track` to replace each visual part independently. Any slot you omit keeps its native appearance.

```tsx
import { Box, Host, RangeSlider } from '@expo/ui/jetpack-compose';
import {
  background,
  clip,
  Shapes,
  size,
} from '@expo/ui/jetpack-compose/modifiers';

export default function CustomThumbsExample() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <RangeSlider startValue={0.2} endValue={0.8}>
        <RangeSlider.StartThumb>
          <Box
            modifiers={[
              size(24, 24),
              clip(Shapes.Circle),
              background('#6750A4'),
            ]}
          />
        </RangeSlider.StartThumb>
        <RangeSlider.EndThumb>
          <Box
            modifiers={[
              size(24, 24),
              clip(Shapes.Circle),
              background('#006A60'),
            ]}
          />
        </RangeSlider.EndThumb>
      </RangeSlider>
    </Host>
  );
}
```

A custom `RangeSlider.Track` replaces the entire track, including its active section and tick marks. Use the selection from `onValueChange` if your track needs to reflect the selected range.

## API

```tsx
import { RangeSlider } from '@expo/ui/jetpack-compose';
```

## Component

### `RangeSlider`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[RangeSliderProps](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/range-slider.md#rangesliderprops)\>

A Material 3 slider for selecting two values on a bounded track. It works only inside a `Host` component.

RangeSliderProps

### `children`

Supported platforms: Android.

Optional • Type: [ReactNode](https://reactnative.dev/docs/react-node)

Custom content wrapped in `RangeSlider.StartThumb`, `RangeSlider.EndThumb`, or `RangeSlider.Track`.

### `colors`

Supported platforms: Android.

Optional • Type: [SliderColors](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/range-slider.md#slidercolors)

Colors for the thumbs, track, and tick marks. Omitted colors use the Material theme.

### `enabled`

Supported platforms: Android.

Optional • Type: `boolean` • Default: `true`

Whether the slider responds to user interaction.

### `endValue`

Supported platforms: Android.

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

The selected end value. Changing this prop updates the native selection when the user is not dragging.

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `onValueChange`

Supported platforms: Android.

Optional • Type: (range: [RangeSliderRange](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/range-slider.md#rangesliderrange)) => void

Called with both endpoints when the user changes the selection.

### `onValueChangeFinished`

Supported platforms: Android.

Optional • Type: `() => void`

Called when the user finishes changing the selection. It has no value argument. `onValueChange` reports the selection.

### `startValue`

Supported platforms: Android.

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

The selected start value. Changing this prop updates the native selection when the user is not dragging.

### `steps`

Supported platforms: Android.

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

The number of selectable positions between the track bounds. Must be a nonnegative integer. `0` means continuous selection.

### `trackRange`

Supported platforms: Android.

Optional • Type: [RangeSliderRange](https://docs.expo.dev/versions/unversioned/sdk/ui/jetpack-compose/range-slider.md#rangesliderrange) • Default: `{ start: 0, endInclusive: 1 }`

The bounds of the entire track. The slider clamps values outside these bounds.

## Types

### `RangeSliderRange`

Supported platforms: Android.

An inclusive numeric range for `RangeSlider`.

| Property | Type | Description |
| --- | --- | --- |
| endInclusive | `number` | The end of the range, included in the selection. |
| start | `number` | The start of the range. |

### `SliderColors`

Supported platforms: Android.

Colors for slider elements. Maps directly to Material3's `SliderDefaults.colors()`.

| Property | Type | Description |
| --- | --- | --- |
| activeTickColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The active tick color when enabled. |
| activeTrackColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The active track color when enabled. |
| disabledActiveTickColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The active tick color when disabled. |
| disabledActiveTrackColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The active track color when disabled. |
| disabledInactiveTickColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The inactive tick color when disabled. |
| disabledInactiveTrackColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The inactive track color when disabled. |
| disabledThumbColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The thumb color when disabled. |
| inactiveTickColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The inactive tick color when enabled. |
| inactiveTrackColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The inactive track color when enabled. |
| thumbColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | The thumb color when enabled. |