Slider
Slider component that allows users to make a single selection from a range of values.
Parameters
The current value of the slider.
A string label representing the current value of the slider.
A callback invoked when the slider's value changes.
The modifier to be applied to the slider.
An optional label displayed above the slider.
Optional helper text parameters displayed below the label.
A boolean indicating whether the slider is enabled or disabled.
A callback invoked when the value change is finished.
The interaction source for the slider, used to observe interaction events.
The number of discrete steps the slider can take between the minimum and maximum values.
The range of values the slider can represent.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.Slider
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
var sliderPosition by remember { mutableFloatStateOf(0f) }
Slider(
value = sliderPosition,
label = "Skapa Slider",
// The tooltip label for the current value of the slider. Reformat the initial float
// value to your desired type and append your prefix or suffix to it
valueLabel = "${sliderPosition.toInt()} cm",
helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
onValueChange = { sliderPosition = it }, // The callback to update the slider value
valueRange = 0f..100f // The range of values the slider can take
)
var stepSliderPosition by remember { mutableFloatStateOf(0f) }
Slider(
value = stepSliderPosition,
label = "Skapa Slider with steps",
// The tooltip label for the current value of the slider. Reformat the initial float
// value to your desired type and append your prefix or suffix to it
valueLabel = "${stepSliderPosition.toInt()} cm",
helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
onValueChange = { stepSliderPosition = it }, // The callback to update the slider value
steps = 5, // The number of discrete steps the slider can take
valueRange = 0f..30f // The range of values the slider can take
)
}
}
//sampleEnd
}Slider component that allows users to make a range selection from a range of values. This implies 2 selection points between the allowed range.
Parameters
The current value of the slider represented as a closed floating-point range.
A string label representing the current value of the slider.
A callback invoked when the slider's value changes.
The modifier to be applied to the slider.
An optional label displayed above the slider.
Optional helper text parameters displayed below the label.
A boolean indicating whether the slider is enabled or disabled.
A callback invoked when the value change is finished.
The interaction source for the start thumb of the slider, used to observe interaction events.
The interaction source for the end thumb of the slider, used to observe interaction events.
The number of discrete steps the slider can take between the minimum and maximum values.
The range of values the slider can represent.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.Slider
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(20.dp)) {
// This is a range slider which requires a start and end value. CloseFloatingPointRange<Float>.
var rangeSliderPosition by remember { mutableStateOf(0f..5f) }
Slider(
value = rangeSliderPosition,
label = "Skapa Range Slider",
// The tooltip label for the current value of the slider. Reformat the initial float
// value to your desired type and append your prefix or suffix to it
valueLabel = "${rangeSliderPosition.start.toInt()} cm - ${rangeSliderPosition.endInclusive.toInt()} cm",
helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
onValueChange = { rangeSliderPosition = it }, // The callback to update the slider value
valueRange = 0f..10f // The range of values the slider can take
)
// This is a range slider which requires a start and end value. CloseFloatingPointRange<Float>.
var stepRangeSliderPosition by remember { mutableStateOf(0f..5f) }
Slider(
value = stepRangeSliderPosition,
label = "Skapa Range Slider with steps",
// The tooltip label for the current value of the slider. Reformat the initial float
// value to your desired type and append your prefix or suffix to it
valueLabel = "${stepRangeSliderPosition.start.toInt()} cm - ${stepRangeSliderPosition.endInclusive.toInt()} cm",
helperTextParams = HelperTextParams(label = "This is a helper text", state = HelperTextState.Regular),
steps = 9, // The number of discrete steps the slider can take
onValueChange = { stepRangeSliderPosition = it }, // The callback to update the slider value
valueRange = 0f..10f // The range of values the slider can take
)
}
}
//sampleEnd
}