Skip to content

Extra

RangeSlider

A FormaUI range slider — lets the user select a sub-range (start and end value) from a continuous or stepped range, delegating to Material 3's RangeSlider. The sibling of FormaSlider for two-thumb selection.

dev.formaui.components.slider

ContinuousStepped

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

var range by remember { mutableStateOf(0.2f..0.8f) }
FormaRangeSlider(
    value = range,
    onValueChange = { range = it },
    modifier = Modifier.fillMaxWidth(),
)

FormaRangeSlider

A stateless two-thumb slider with the hoisted value as a ClosedFloatingPointRange; the thumbs are bounded by valueRange and cannot cross. Mirrors FormaSlider's API.

valuerequiredTypeClosedFloatingPointRange<Float>DefaultrequiredDescriptionthe current selected range; both ends should sit within valueRange.
onValueChangerequiredType(ClosedFloatingPointRange<Float>) -> UnitDefaultrequiredDescriptioncalled continuously with the new range as the user drags either thumb. The caller must hoist and persist the new value for it to appear.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the slider.
enabledTypeBooleanDefaulttrueDescriptionwhether the slider is interactive.
valueRangeTypeClosedFloatingPointRange<Float>Default0f..1fDescriptionthe inclusive range of selectable values (defaults to 0f..1f).
stepsTypeIntDefault0Descriptionthe number of discrete intermediate stops (0 = continuous).
onValueChangeFinishedType(() -> Unit)?DefaultnullDescriptioncalled once when the user finishes changing the range.
colorsTypeSliderColors?DefaultnullDescriptionthe slider colors (defaults to the M3 defaults, themed by FormaTheme).

Accessibility

Each thumb exposes a 48dp touch target via Material 3's minimum interactive component size; the two thumbs are bounded by valueRange and cannot cross each other.