This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version.

RangeSlider wraps the Material 3 RangeSlider. It lets users select a start and end value on one track. For a single value, use Slider.

Installation

If you are installing this in an existing React Native app, make sure to install expo 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.

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.

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

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

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

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

Component

Types