Slider Component
The slider component is a reusable slider that allows you to create customizable slider by setting with active slider line color, inactive line color and thumb color
Features
- Create slider.
- Customize active slider line color, inactive line color and thumb color
- Interact with slider knob and get selected value through callback onValueChange.
Installation
- Use the
OCSlider
composable in your UI
var value = remember { mutableStateOf(10f) }
OCSlider(
value = value.value,
valueRange = 0f..50f,
modifier = Modifier,
onValueChange = {
//here we will get the latest value of slider
value.value = it
},
)
- If required then we can create the OCSliderConfig object to change the color for thumb, activeTrack, inactiveTrack.
val customConfig = OCSliderConfig(
thumbColor = OCColors.sliderAndroidKnob,
activeTrackColor = OCColors.sliderAndroidSliderLine,
inactiveTrackColor = OCColors.sliderAndroidBackground,
)
var value = remember { mutableStateOf(10f) }
OCSlider(
value = value.value,
valueRange = 0f..50f,
modifier = Modifier,
config = customConfig,
onValueChange = {
//here we will get the latest value of slider
value.value = it
},
)