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

Slider

A SwiftUI Slider component for selecting values from a range.

iOS

Expo UI Slider matches the official SwiftUI 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/swift-ui';

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

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

Slider with custom range

CustomRangeSliderExample.tsx

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

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

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

Slider with step

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

SteppedSliderExample.tsx

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

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

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

Slider with labels

You can add labels to describe a slider's purpose and to mark the minimum and maximum value positions.

LabeledSliderExample.tsx

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

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

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

API

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

No API data file found, sorry!