Slider

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

Usage

Note: Slider is a flexible-width component, it expands to fill available horizontal space and does not have an intrinsic width. When using matchContents on the Host, you should apply a frame modifier on the Slider to give it an explicit width. Alternatively, give the Host an explicit size using style (for example, style={{ width: 300 }} or style={{ flex: 1 }}), or place the Slider inside a SwiftUI container like Form that provides width constraints.

Basic slider

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

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

  return (
    <Host style={{ flex: 1 }}>
      <Slider value={value} onValueChange={setValue} />
    </Host>
  );
}

Slider with custom range

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

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

  return (
    <Host style={{ flex: 1 }}>
      <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.

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

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

  return (
    <Host style={{ flex: 1 }}>
      <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.

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

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

  return (
    <Host style={{ flex: 1 }}>
      <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';

Component

Slider

Type: React.Element<SliderProps>

SliderProps

label

Optional • Type: ReactNode

A label describing the slider's purpose.

lowerLimit

Optional • Type: number

Lower limit the user can drag the thumb to. The visible track still spans min..max, but the thumb stops at lowerLimit during drag.

max

Optional • Type: number

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

maximumValueLabel

Optional • Type: ReactNode

A label displayed at the maximum value position.

min

Optional • Type: number

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

minimumValueLabel

Optional • Type: ReactNode

A label displayed at the minimum value position.

onEditingChanged

Optional • Type: (isEditing: boolean) => void

Callback triggered when the user starts or ends editing the slider.

onValueChange

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

Callback triggered on dragging along the slider.

step

Optional • Type: number

The step increment for the slider.

upperLimit

Optional • Type: number

Upper limit the user can drag the thumb to. The visible track still spans min..max, but the thumb stops at upperLimit during drag.

value

Optional • Type: number

The current value of the slider.

Inherited props

• CommonViewModifierProps