Colorful sliders that can have Solid or Gradient colors for thumb or track which can have thumb and track with varying sizes, borders with solid or gradient colors. And Sliders with emojis, or custom Composables like Icon.
Sliders that can use Color or gradient for track, thumb, or tick colors with custom thumb and track heights.
@Composable
fun ColorfulSlider(
value: Float,
onValueChange: (Float) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
trackHeight: Dp = TrackHeight,
thumbRadius: Dp = ThumbRadius,
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
borderStroke: BorderStroke? = null,
drawInactiveTrack: Boolean = true,
coerceThumbInTrack: Boolean = false
)
And one that returns thumb position as Offset
fun ColorfulSlider(
value: Float,
onValueChange: (Float, Offset) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
trackHeight: Dp = TrackHeight,
thumbRadius: Dp = ThumbRadius,
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
borderStroke: BorderStroke? = null,
drawInactiveTrack: Boolean = true,
coerceThumbInTrack: Boolean = false
)
Usage
ColorfulSlider(
value = progress2,
thumbRadius = 10.dp,
trackHeight = 10.dp,
onValueChange = { it ->
progress2 = it
},
colors = MaterialSliderDefaults.materialColors(
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
activeTrackColor = SliderBrushColor(
brush = sunriseGradient(),
)
),
borderStroke = BorderStroke(2.dp, sunriseGradient())
)
SliderBrushColor
is a data class which can be used to set color or brush for any color property
/**
* Data class that contains color or/and brush property for drawing track section of
* [ColorfulSlider]
*/
data class SliderBrushColor(
val color: Color = Color.Unspecified,
val brush: Brush? = null
) {
/**
* [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and
* contains [color] property as [SolidColor.value]
*/
val activeBrush: Brush
get() = brush ?: solidColor
/**
* [SolidColor] is a [Brush] that
* wraps [color] property that is used for [activeBrush] if [brush] property is **null**
*/
val solidColor = SolidColor(color)
}
Sliders that can move a label above the Slider and display progress
fun SliderWithLabel(
value: Float,
onValueChange: (Float) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
trackHeight: Dp = TrackHeight,
thumbRadius: Dp = ThumbRadius,
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
borderStroke: BorderStroke? = null,
drawInactiveTrack: Boolean = true,
coerceThumbInTrack: Boolean = false,
labelPosition: LabelPosition = LabelPosition.Top,
yOffset: Dp = 0.dp,
label: @Composable () -> Unit = {}
)
Usage
SliderWithLabel(
value = labelProgress,
onValueChange = {
labelProgress = it
},
thumbRadius = 10.dp,
trackHeight = 10.dp,
valueRange = 0f..100f,
colors = MaterialSliderDefaults.materialColors(),
labelPosition = LabelPosition.Bottom,
label = {
Text(
text = "$${labelProgress.roundToInt()}",
modifier = Modifier
.shadow(1.dp, shape = CircleShape)
.background(Brown400, shape = CircleShape)
.padding(5.dp),
color = Color.White
)
}
)
Sliders that can use any Composable for thumb and use Color or gradient for track, thumb, or tick colors with custom thumb and track heights.
fun ColorfulIconSlider(
modifier: Modifier = Modifier,
value: Float,
onValueChange: (Float, Offset) -> Unit,
enabled: Boolean = true,
valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
steps: Int = 0,
onValueChangeFinished: (() -> Unit)? = null,
trackHeight: Dp = TrackHeight,
colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),
borderStroke: BorderStroke? = null,
drawInactiveTrack: Boolean = true,
coerceThumbInTrack: Boolean = false,
thumb: @Composable () -> Unit
)
Usage
Emojis are transparent by default in Compose, you might want to set non-transparent color for Text
ColorfulIconSlider(
value = progress,
onValueChange = { value, offset ->
progress = value
},
trackHeight = 14.dp,
colors = MaterialSliderDefaults.materialColors(
activeTrackColor = SliderBrushColor(color = Blue400),
inactiveTrackColor = SliderBrushColor(color = Color.Transparent)
),
borderStroke = BorderStroke(1.dp, Blue400)
) {
Text(text = "👍", fontSize = 40.sp, color = Color.Black)
}
or
ColorfulIconSlider(
value = progress,
onValueChange = { value, offset ->
progress = value
},
trackHeight = 10.dp,
colors = MaterialSliderDefaults.materialColors(
inactiveTrackColor = SliderBrushColor(color = Color.Transparent),
activeTrackColor = SliderBrushColor(
brush = instaGradient(),
)
),
borderStroke = BorderStroke(2.dp, instaGradient())
) {
Image(
painter = painterResource(id = R.drawable.stf),
contentDescription = null,
modifier = Modifier.size(40.dp)
)
}
To get a Git project into your build:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:<version>'
}