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.

2 variantsThemed defaults48dp target

import dev.formaui.components.slider.FormaSlider

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

KOTLIN
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.