{"id":15132440,"url":"https://github.com/krottv/compose-sliders","last_synced_at":"2025-09-29T00:32:02.010Z","repository":{"id":45527753,"uuid":"429439847","full_name":"krottv/compose-sliders","owner":"krottv","description":"Sliders for compose with custom styles","archived":false,"fork":false,"pushed_at":"2022-10-02T09:23:10.000Z","size":171,"stargazers_count":67,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-18T22:38:07.289Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krottv.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-18T13:27:20.000Z","updated_at":"2025-01-04T20:52:12.000Z","dependencies_parsed_at":"2023-01-19T03:16:03.407Z","dependency_job_id":null,"html_url":"https://github.com/krottv/compose-sliders","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/krottv/compose-sliders","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krottv%2Fcompose-sliders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krottv%2Fcompose-sliders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krottv%2Fcompose-sliders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krottv%2Fcompose-sliders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krottv","download_url":"https://codeload.github.com/krottv/compose-sliders/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krottv%2Fcompose-sliders/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277450938,"owners_count":25819971,"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","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-09-26T04:04:45.709Z","updated_at":"2025-09-29T00:32:01.723Z","avatar_url":"https://github.com/krottv.png","language":"Kotlin","funding_links":[],"categories":["Libraries"],"sub_categories":["UI"],"readme":"# Custom compose sliders\nThis package allows you to build highly customizable sliders and tracks for compose for Android\n\n\u003cimg src=\"https://github.com/krottv/compose-sliders/blob/master/showcase.png?raw=true\" alt=\"showcase\" width=\"400\"/\u003e\n\n# Add to your project\n[![Release](https://jitpack.io/v/krottv/compose-sliders.svg)](https://jitpack.io/#krottv/compose-sliders)\n\nAdd it in your root build.gradle at the end of repositories:\n```\nallprojects {\n    repositories {\n        maven { url 'https://jitpack.io' }\n    }\n}\n```\nAdd the dependency\n```\nimplementation \"com.github.krottv:compose-sliders:$compose_sliders_version\"\n```\n\n# Simple Usage\n```kotlin\nvar stateSlider2 by remember { mutableStateOf(0.5f) }\nSliderValueHorizontal(\n    stateSlider2, { stateSlider2 = it },\n    modifier = Modifier\n        .fillMaxWidth()\n        .height(80.dp), steps = 10,\n    thumbHeightMax = true,\n    track = { modifier: Modifier,\n                fraction: Float,\n                interactionSource: MutableInteractionSource,\n                tickFractions: List\u003cFloat\u003e,\n                enabled: Boolean -\u003e\n\n        DefaultTrack(\n            modifier,\n            fraction,\n            interactionSource,\n            tickFractions,\n            enabled,\n            height = 4.dp\n        )\n    },\n    thumb = { modifier: Modifier,\n                offset: Dp,\n                interactionSource: MutableInteractionSource,\n                enabled: Boolean,\n                thumbSize: DpSize -\u003e\n\n        DefaultThumb(\n            modifier, offset, interactionSource, enabled, thumbSize,\n            color = Color.Blue,\n            scaleOnPress = 1.3f\n        )\n    }\n)\n```\n\n# Advanced Usage\nIt allows to use custom composables for track and thumb. For detailed usage see sample/MainActivity\n\n```kotlin\nvar stateSlider3 by remember { mutableStateOf(0.5f) }\n\nSliderValueHorizontal(\n    stateSlider3, { stateSlider3 = it },\n    modifier = Modifier\n        .fillMaxWidth(),\n    thumbHeightMax = false,\n    track = { modifier: Modifier,\n                progress: Float,\n                _, _, _ -\u003e\n\n        Box(\n            Modifier.padding(vertical = 30.dp)\n                .height(8.dp).then(modifier)\n        ) {\n            val bgTrack = Modifier.background(\n                Color.Magenta.copy(alpha = 0.5f),\n                RoundedCornerShape(100)\n            )\n\n            Spacer(bgTrack.fillMaxHeight().then(modifier))\n\n            val bgProgress = Modifier.background(\n                Brush.linearGradient(\n                    listOf(\n                        Color.Green,\n                        Color.Red,\n                        Color.Blue\n                    )\n                ),\n                RoundedCornerShape(100)\n            )\n\n            Spacer(\n                bgProgress.fillMaxHeight()\n                    .fillMaxWidth(fraction = progress)\n                    .then(modifier)\n            )\n        }\n    }, thumb = { modifier, _: Dp,\n                    mutableSource,\n                    _, _ -\u003e\n\n        var isPressed by remember { mutableStateOf(false) }\n        mutableSource.ListenOnPressed { isPressed = it }\n\n        val color by animateColorAsState(\n            if (isPressed) Color.Red else Color.Yellow,\n            TweenSpec(durationMillis = 200)\n        )\n\n        Spacer(\n            modifier.background(color)\n                .border(1.dp, Color.Red)\n        )\n\n    },\n    thumbSizeInDp = DpSize(60.dp, 30.dp)\n)\n```\n# About\nThe code is mainly based on Slider from compose material package with the abilities of additional customization. This project is inspired by [swiftui-sliders](https://github.com/spacenation/swiftui-sliders). Currently we have only SliderValueHorizontal and in the future it is possible to add SliderValueVertical, SliderRangeHorizontal, SliderRangeVertical if there is a demand for it.\n\n# License\n\n    Copyright 2021 compose-sliders Contributors\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n    https://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrottv%2Fcompose-sliders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrottv%2Fcompose-sliders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrottv%2Fcompose-sliders/lists"}