Skip to content

Component

Slider

A FormaUI slider — lets the user select a value from a continuous or stepped range, delegating to Material 3's Slider.

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 value by remember { mutableFloatStateOf(0.4f) }
FormaSlider(
    value = value,
    onValueChange = { value = it },
    modifier = Modifier.fillMaxWidth(),
)

// Stepped (discrete) slider:
var stepped by remember { mutableFloatStateOf(2f) }
FormaSlider(
    value = stepped,
    onValueChange = { stepped = it },
    valueRange = 0f..4f,
    steps = 3,
)

FormaSlider

Stateless slider with hoisted state: the caller owns value and updates it in onValueChange; set steps to snap to discrete stops within valueRange.

valuerequiredTypeFloatDefaultrequiredDescriptionthe current value; should sit within valueRange.
onValueChangerequiredType(Float) -> UnitDefaultrequiredDescriptioncalled continuously with the new value as the user drags.
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 value.
colorsTypeSliderColors?DefaultnullDescriptionthe slider colors (defaults to the M3 defaults, themed by FormaTheme).

Accessibility

Exposes a 48dp touch target via Material 3's minimum interactive component size.