Slider

A component that allows users to make selections from a range of values.

Installation

Slider uses the slider implementation from the composables library.

💡

Components with complex implementation are provided via the composables library.

dependencies {
    api("com.nomanr:composables:$version")
}

Then add the component:

./gradlew lumo --add Slider

Usage

Basic Slider

var value by remember { mutableFloatStateOf(0.5f) }
 
Slider(
    value = value,
    onValueChange = { value = it }
)

Range Slider

var range by remember { mutableStateOf(0.2f..0.8f) }
 
RangeSlider(
    value = range,
    onValueChange = { range = it },
    valueRange = 0f..100f,
    steps = 4,
    colors = SliderDefaults.colors(
        thumbColor = AppTheme.colors.primary,
        activeTrackColor = AppTheme.colors.primary
    )
)

API Documentation

Slider Parameters

Parameter	Type	Description
`value`	`Float`	Current value of the slider
`onValueChange`	`(Float) -> Unit`	Called when value changes
`modifier`	`Modifier`	Modifier for the slider
`enabled`	`Boolean`	Whether the slider is enabled
`valueRange`	`ClosedRange<Float>`	Range of valid values
`steps`	`Int`	Number of discrete steps
`colors`	`SliderColors`	Colors for different states
`interactionSource`	`MutableInteractionSource`	Source of interactions

RangeSlider Parameters

Parameter	Type	Description
`value`	`ClosedRange<Float>`	Current range values
`onValueChange`	`(ClosedRange<Float>) -> Unit`	Called when range changes
`modifier`	`Modifier`	Modifier for the slider
`enabled`	`Boolean`	Whether the slider is enabled
`valueRange`	`ClosedRange<Float>`	Range of valid values
`steps`	`Int`	Number of discrete steps
`colors`	`SliderColors`	Colors for different states
`startInteractionSource`	`MutableInteractionSource`	Source of start thumb interactions
`endInteractionSource`	`MutableInteractionSource`	Source of end thumb interactions

Scaffold Snackbar