{"id":19521779,"url":"https://github.com/smarttoolfactory/compose-colorful-sliders","last_synced_at":"2025-04-26T09:31:58.116Z","repository":{"id":39365296,"uuid":"478631109","full_name":"SmartToolFactory/Compose-Colorful-Sliders","owner":"SmartToolFactory","description":"🚀🌈 😍 Colorful Sliders written with Jetpack Compose that enliven default sliders with track and thumb dimensions, and gradient colors, borders, labels on top or at the bottom move with thumb and ColorfulIconSlider that can display emoji or any Composable as thumb","archived":false,"fork":false,"pushed_at":"2024-05-30T05:18:50.000Z","size":3457,"stargazers_count":212,"open_issues_count":6,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T11:41:38.851Z","etag":null,"topics":["android","gradient-slider","jetpack-compose","material-design","slider","sliders"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmartToolFactory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-06T16:01:17.000Z","updated_at":"2025-03-26T17:52:07.000Z","dependencies_parsed_at":"2024-05-30T07:34:46.726Z","dependency_job_id":"a25fa6ae-b04c-4d1e-a28f-acb8d2964fae","html_url":"https://github.com/SmartToolFactory/Compose-Colorful-Sliders","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Colorful-Sliders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Colorful-Sliders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Colorful-Sliders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-Colorful-Sliders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Compose-Colorful-Sliders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967123,"owners_count":21515541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","gradient-slider","jetpack-compose","material-design","slider","sliders"],"created_at":"2024-11-11T00:34:53.641Z","updated_at":"2025-04-26T09:31:57.756Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compose Colorful Customizable Sliders\n\n[![](https://jitpack.io/v/SmartToolFactory/Compose-Colorful-Sliders.svg)](https://jitpack.io/#SmartToolFactory/Compose-Colorful-Sliders)\n\nColorful sliders that can have Solid or Gradient colors for thumb or track which can have thumb and\ntrack with varying sizes, borders with solid or gradient colors. And Sliders with emojis, or custom\nComposables like **Icon**.\n\n\n\u003cimg src=\"./screenshots/slider_icons.png\" width=\"30%\"/\u003e \u003cimg src=\"./screenshots/slider_gradient.png\" width=\"30%\"/\u003e \u003cimg src=\"./screenshots/slider_properties.png\" width=\"30%\"/\u003e \u003cimg src=\"./screenshots/slider_labels.png\" width=\"25%\"/\u003e \u003cimg src=\"./screenshots/slider_dimensions.png\" width=\"25%\"/\u003e \n\n## ColorfulSlider\n\nSliders that can use Color or gradient for track, thumb, or tick colors with custom thumb and track\nheights.\n\n```kotlin\n@Composable\nfun ColorfulSlider(\n    value: Float,\n    onValueChange: (Float) -\u003e Unit,\n    modifier: Modifier = Modifier,\n    enabled: Boolean = true,\n    valueRange: ClosedFloatingPointRange\u003cFloat\u003e = 0f..1f,\n    steps: Int = 0,\n    onValueChangeFinished: (() -\u003e Unit)? = null,\n    trackHeight: Dp = TrackHeight,\n    thumbRadius: Dp = ThumbRadius,\n    colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),\n    borderStroke: BorderStroke? = null,\n    drawInactiveTrack: Boolean = true,\n    coerceThumbInTrack: Boolean = false\n) \n```\n\nAnd one that returns thumb position as `Offset`\n\n```\nfun ColorfulSlider(\n    value: Float,\n    onValueChange: (Float, Offset) -\u003e Unit,\n    modifier: Modifier = Modifier,\n    enabled: Boolean = true,\n    valueRange: ClosedFloatingPointRange\u003cFloat\u003e = 0f..1f,\n    steps: Int = 0,\n    onValueChangeFinished: (() -\u003e Unit)? = null,\n    trackHeight: Dp = TrackHeight,\n    thumbRadius: Dp = ThumbRadius,\n    colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),\n    borderStroke: BorderStroke? = null,\n    drawInactiveTrack: Boolean = true,\n    coerceThumbInTrack: Boolean = false\n)\n```\n\n* **value** current value of the Slider. If outside of **valueRange** provided, value will be\n  **coerced** to this range.\n* **onValueChange** lambda that returns value, position of **thumb** as **Offset**, vertical center\n  is stored in y.\n* **modifier** modifiers for the Slider layout\n* **enabled** whether or not component is enabled and can be interacted with or not\n* **valueRange** range of values that Slider value can take. Passed value will be coerced to this\n  range\n* **steps** if greater than 0, specifies the amounts of discrete values, evenly distributed between\n  across the whole value range. If 0, slider will behave as a continuous slider and allow to choose\n  any value from the range specified. Must not be negative.\n* **trackHeight** height of the track that will be drawn on Canvas. half of trackHeight is used\n  as **stroke** width.\n* **thumbRadius** radius of thumb of the the slider\n* **colors** MaterialSliderColors** that will be used to determine the color of the Slider parts in\n  different state. See **MaterialSliderDefaults.defaultColors**,  **\n  MaterialSliderDefaults.customColors** or other functions to customize.\n* **borderStroke** draws border around the track with given width in dp.\n* **drawInactiveTrack** flag to draw **InActive** track between active progress and track end.\n* **coerceThumbInTrack** when set to true track's start position is matched to thumbs left on start\n  and thumbs right at the end of the track. Use this when **trackHeight** is bigger than **\n  thumbRadius**.\n\nUsage\n\n```kotlin\nColorfulSlider(\n    value = progress2,\n    thumbRadius = 10.dp,\n    trackHeight = 10.dp,\n    onValueChange = { it -\u003e\n        progress2 = it\n    },\n    colors = MaterialSliderDefaults.materialColors(\n        inactiveTrackColor = SliderBrushColor(color = Color.Transparent),\n        activeTrackColor = SliderBrushColor(\n            brush = sunriseGradient(),\n        )\n    ),\n    borderStroke = BorderStroke(2.dp, sunriseGradient())\n)\n```\n\n`SliderBrushColor` is a data class which can be used to set color or brush for any color property\n\n```kotlin\n\n/**\n * Data class that contains color or/and brush property for drawing track section of\n * [ColorfulSlider]\n */\ndata class SliderBrushColor(\n    val color: Color = Color.Unspecified,\n    val brush: Brush? = null\n) {\n    /**\n     * [Brush] that is not **null** [brush] property or [SolidColor] that is not nullable and\n     * contains [color] property as [SolidColor.value]\n     */\n    val activeBrush: Brush\n        get() = brush ?: solidColor\n\n    /**\n     * [SolidColor] is a [Brush] that\n     * wraps [color] property that is used for [activeBrush] if [brush] property is **null**\n     */\n    val solidColor = SolidColor(color)\n}\n```\n\n## SliderWithLabel\n\nSliders that can move a label above the Slider and display progress\n\n```kotlin\nfun SliderWithLabel(\n    value: Float,\n    onValueChange: (Float) -\u003e Unit,\n    modifier: Modifier = Modifier,\n    enabled: Boolean = true,\n    valueRange: ClosedFloatingPointRange\u003cFloat\u003e = 0f..1f,\n    steps: Int = 0,\n    onValueChangeFinished: (() -\u003e Unit)? = null,\n    trackHeight: Dp = TrackHeight,\n    thumbRadius: Dp = ThumbRadius,\n    colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),\n    borderStroke: BorderStroke? = null,\n    drawInactiveTrack: Boolean = true,\n    coerceThumbInTrack: Boolean = false,\n    labelPosition: LabelPosition = LabelPosition.Top,\n    yOffset: Dp = 0.dp,\n    label: @Composable () -\u003e Unit = {}\n)\n```\n\nUsage\n\n```kotlin\nSliderWithLabel(\n    value = labelProgress,\n    onValueChange = {\n        labelProgress = it\n    },\n    thumbRadius = 10.dp,\n    trackHeight = 10.dp,\n    valueRange = 0f..100f,\n    colors = MaterialSliderDefaults.materialColors(),\n    labelPosition = LabelPosition.Bottom,\n    label = {\n        Text(\n            text = \"$${labelProgress.roundToInt()}\",\n            modifier = Modifier\n                .shadow(1.dp, shape = CircleShape)\n                .background(Brown400, shape = CircleShape)\n                .padding(5.dp),\n            color = Color.White\n        )\n    }\n)\n```\n\n## ColorfulIconSlider\n\nSliders that can use any Composable for thumb and use Color or gradient for track, thumb, or tick\ncolors with custom thumb and track heights.\n\n```kotlin\nfun ColorfulIconSlider(\n    modifier: Modifier = Modifier,\n    value: Float,\n    onValueChange: (Float, Offset) -\u003e Unit,\n    enabled: Boolean = true,\n    valueRange: ClosedFloatingPointRange\u003cFloat\u003e = 0f..1f,\n    steps: Int = 0,\n    onValueChangeFinished: (() -\u003e Unit)? = null,\n    trackHeight: Dp = TrackHeight,\n    colors: MaterialSliderColors = MaterialSliderDefaults.defaultColors(),\n    borderStroke: BorderStroke? = null,\n    drawInactiveTrack: Boolean = true,\n    coerceThumbInTrack: Boolean = false,\n    thumb: @Composable () -\u003e Unit\n)\n```\n\nUsage\n\nEmojis are transparent by default in Compose, you might want to set non-transparent color for `Text`\n\n```kotlin\nColorfulIconSlider(\n    value = progress,\n    onValueChange = { value, offset -\u003e\n        progress = value\n    },\n    trackHeight = 14.dp,\n    colors = MaterialSliderDefaults.materialColors(\n        activeTrackColor = SliderBrushColor(color = Blue400),\n        inactiveTrackColor = SliderBrushColor(color = Color.Transparent)\n    ),\n    borderStroke = BorderStroke(1.dp, Blue400)\n) {\n    Text(text = \"👍\", fontSize = 40.sp, color = Color.Black)\n}\n```\n\nor\n\n```kotlin\nColorfulIconSlider(\n    value = progress,\n    onValueChange = { value, offset -\u003e\n        progress = value\n    },\n    trackHeight = 10.dp,\n    colors = MaterialSliderDefaults.materialColors(\n        inactiveTrackColor = SliderBrushColor(color = Color.Transparent),\n        activeTrackColor = SliderBrushColor(\n            brush = instaGradient(),\n        )\n    ),\n    borderStroke = BorderStroke(2.dp, instaGradient())\n) {\n    Image(\n        painter = painterResource(id = R.drawable.stf),\n        contentDescription = null,\n        modifier = Modifier.size(40.dp)\n    )\n}\n```\n\n## Gradle Setup\n\nTo get a Git project into your build:\n\n* Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end\n  of repositories:\n\n```\nallprojects {\n  repositories {\n      ...\n      maven { url 'https://jitpack.io' }\n  }\n}\n```\n\n* Step 2. Add the dependency\n\n```\ndependencies {\n  implementation 'com.github.SmartToolFactory:Compose-Colorful-Sliders:\u003cversion\u003e'\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-colorful-sliders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmarttoolfactory%2Fcompose-colorful-sliders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-colorful-sliders/lists"}