When to use it
Bounds must be finite, increasing, and have a finite span. Nonfinite values fall back to bounds; reversed endpoints reorder for display without changing host state. Keep exact financial arithmetic in the application.
FormsReact Native
Range slider
Choose bounded numeric intervals with independently adjustable native endpoints.
Native example
Use Range slider
Bounds must be finite, increasing, and have a finite span. Nonfinite values fall back to bounds; reversed endpoints reorder for display without changing host state. Keep exact financial arithmetic in the application.
View captured React Native example
<LumenRangeSlider label="Capacity" value={capacity} onValueChange={setCapacity}
min={0} max={100} step={10} formatValue={value => String(value) + '%'} />Reference
Public API
The primary shared and platform-specific options exposed by LumenRangeSlider.
| API | Values or type | Default | Description |
|---|---|---|---|
| label / value / onValueChange | string / readonly [number, number] / callback | Required | Names and controls the numeric interval. |
| min / max | number | 0 / 100 | Provides valid inclusive bounds. |
| step | number | span / 100 | Compose counts intermediate stops; Swift and React Native use positive increments. |
| startLabel / endLabel / formatValue | string / string / (number) => string | Minimum / Maximum / numeric text | Localizes both endpoint names and values. |
| enabled / readOnly | boolean | Enabled / editable | Blocks adjustment while retaining values. |
| — | — | — | Reports the end of native adjustment. |
| style | StyleProp<ViewStyle> | None | Applies control layout. |
Native behavior
Design and accessibility
Accessibility
Exposes separately named lower and upper native thumbs with formatted spoken values and keyboard adjustment.
Shared component