FormsReact Native

Slider

Adjust a continuous or stepped numeric value with a visible formatted label.

Public APILumenSliderReact Native

Native example

Use Slider

Use for an approximate or continuously adjustable numeric value. Prefer TextField or Picker when exact entry is more important.

View verified React Native runtime capture

Slider rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenSlider
  label="Minimum speed"
  value={minimumSpeed}
  min={1_000}
  max={5_000}
  step={100}
  valueLabel={String(minimumSpeed) + ' RPM'}
  onValueChange={setMinimumSpeed}
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenSlider.

API	Values or type	Default	Description
value	`number`	`Required`	Stores the current numeric value.
min / max	`number`	`Required`	Defines the valid range.
step	`number`	`1% of range`	Adds valid stepped increments when positive and finite.
valueLabel	`string`	`String(value)`	Shows a formatted current value.

Native behavior

Design and accessibility

When to use it

Use for an approximate or continuously adjustable numeric value. Prefer TextField or Picker when exact entry is more important.

Accessibility

The native slider reports its label and current value. A visible formatted value helps people understand the current setting.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose