Kwik
fun KwikRangeSlider(modifier: Modifier = Modifier, value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, valueRange: ClosedFloatingPointRange<Float> = 0f..100f, steps: Int = 99, enabled: Boolean = true, startThumb: @Composable () -> Unit = {
SliderDefaults.Thumb(
interactionSource = remember { MutableInteractionSource() },
thumbSize = DpSize(10.dp, 25.dp)
)
}, endThumb: @Composable () -> Unit = {
SliderDefaults.Thumb(
interactionSource = remember { MutableInteractionSource() },
thumbSize = DpSize(10.dp, 25.dp)
)
}, track: @Composable (RangeSliderState) -> Unit = { rangeSliderState ->
SliderDefaults.Track(
rangeSliderState = rangeSliderState,
modifier = Modifier.height(6.dp),
thumbTrackGapSize = 0.dp,
colors = SliderDefaults.colors(
activeTrackColor = MaterialTheme.colorScheme.primary,
inactiveTrackColor = Color.LightGray,
activeTickColor = Color.Transparent,
inactiveTickColor = Color.Transparent
)
)
})
A range slider component
Parameters
value
ClosedFloatingPointRange
on
(ClosedFloatingPointRange
value
ClosedFloatingPointRange
steps
Int number of steps in the slider
enabled
Boolean whether the slider is enabled or not
start
@Composable () -> Unit custom start thumb
end
@Composable () -> Unit custom end thumb
track
@Composable (RangeSliderState) -> Unit custom track
Usage:
var sliderPosition by remember { mutableStateOf(20f..80f) }
KwikRangeSlider(
value = sliderPosition,
onValueChange = { range ->
sliderPosition = range
}
)Content copied to clipboard