Colorful Sliders written with Jetpack Compose that enliven default sliders

Last update: Dec 30, 2022

Overview

Compose Colorful Customizable Sliders

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.

ColorfulSlider

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 = 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 = 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
)

value current value of the Slider. If outside of valueRange provided, value will be coerced to this range.
onValueChange lambda that returns value, position of thumb as Offset, vertical center is stored in y.
modifier modifiers for the Slider layout
enabled whether or not component is enabled and can be interacted with or not
valueRange range of values that Slider value can take. Passed value will be coerced to this range
steps if greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, slider will behave as a continuous slider and allow to choose any value from the range specified. Must not be negative.
trackHeight height of the track that will be drawn on Canvas. half of trackHeight is used as stroke width.
thumbRadius radius of thumb of the the slider
colors MaterialSliderColors** that will be used to determine the color of the Slider parts in different state. See MaterialSliderDefaults.defaultColors, ** MaterialSliderDefaults.customColors** or other functions to customize.
borderStroke draws border around the track with given width in dp.
drawInactiveTrack flag to draw InActive track between active progress and track end.
coerceThumbInTrack when set to true track's start position is matched to thumbs left on start and thumbs right at the end of the track. Use this when trackHeight is bigger than ** thumbRadius**.

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)
}

SliderWithLabel

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 = 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
        )
    }
)

ColorfulIconSlider

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 = 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)
}

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)
    )
}
}

Gradle Setup

To get a Git project into your build:

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
      ...
      maven { url 'https://jitpack.io' }
  }
}

Step 2. Add the dependency

dependencies {
  implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:'
}

Comments

Delay on touch event

Would it be possible to add a delay parameter for the touch event so it doesn't instantly change the value of the slider when a touch event is registered? Would make it easier in a scrollable view to activate the scroll rather than flinging the values on the slider. The motion event lib you're using has something called delayAfterDownInMillis: Long = 0L maybe that does the trick?

opened by makam92 5
License question

As your repositories name no license, and searching did not reveal any: Could you please specify what license your libraries fall under? No license at all poses a risk to those using your libs, as it a) means "all rights reserved" and b) renders those other projects non-free. I guess this is just an oversight from your end and easily fixed – so thanks in advance!

opened by IzzySoft 4

SliderWithLabel wrong initial label position

When labelProgress is greater than min range, initial label position is at start, but should be on top/bottom of thumb.

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
        )
    }
)

opened by maciek-s 1

onValueChangeFinished cannot respond to clicked

Now when Tick is clicked, onValueChangeFinished will not be triggered. If you want to listen in onValueChangeFinished, you will lose this event, but in onValueChange, you cannot deal with scenes with item animations because of frequent calls.

opened by choristery 0
Animation when progress updated

I am using this slider as the linear progress bar and update the progress by code. However, it does not support to use the animation which can make the updating process much more elegant. Is it possible for you to provide that functionality?

opened by KevinnZou 1
Steps not working
Hi! It looks like the steps are not working. I've tried this code but the slider does not snap into the step positions as it does for the default Slider

var sliderPosition by remember { mutableStateOf(0.5f) } ColorfulSlider( value = sliderPosition, onValueChange = { it-> sliderPosition = it }, steps = 8 )
opened by aramsheroyan 1

Releases(1.1.0)

1.1.0(Sep 8, 2022)
This version includes

sliding gestures change from touch event to drag and tap events

bug fix for ColorfulIconSlider thumb height being clipped

Source code(tar.gz)
Source code(zip)
1.0.2(May 23, 2022)

This version update Jetpack Compose version to 1.2.0-beta02 which deprecated partial consumes and gesture library to 1.2.0
Source code(tar.gz)
Source code(zip)
1.0.1(Apr 11, 2022)

Updates max height constraint from 48.dp to max of track height and thumb size
Source code(tar.gz)
Source code(zip)
1.0.0(Apr 11, 2022)

Source code(tar.gz)
Source code(zip)

Colorful Sliders written with Jetpack Compose that enliven default sliders

Related tags

Overview

Compose Colorful Customizable Sliders

ColorfulSlider

SliderWithLabel

ColorfulIconSlider

Gradle Setup

Comments

Delay on touch event

License question

SliderWithLabel wrong initial label position

onValueChangeFinished cannot respond to clicked

Animation when progress updated

Steps not working

Releases(1.1.0)

1.1.0(Sep 8, 2022)

1.0.2(May 23, 2022)

1.0.1(Apr 11, 2022)

1.0.0(Apr 11, 2022)

Owner

Smart Tool Factory

A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose

A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform

Android browser written by jetpack compose

Yet another ToDo app, but the UI completely written in Jetpack Compose!

Morph is an Android library, written in Kotlin, built to work together with Jetpack Compose.

A library that you can use in 4 different types toast written with Jetpack Compose

Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose

SpotifyCompose - Spotify UI written on Jetpack Compose

An Android imageboard client with the focus on maximum performance, fully written with Jetpack Compose

A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose.

A LibrePhotos android client written using Jetpack Compose and all the latest Android technologies

FirebaseSignInWithGoogle app it's written in Kotlin and shows a simple solution for implementing Firebase Authentication with Google, using Jetpack Compose on Android.

It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose