{"id":18116550,"url":"https://github.com/2307vivek/seeker","last_synced_at":"2025-05-16T06:07:40.322Z","repository":{"id":73195481,"uuid":"595118282","full_name":"2307vivek/Seeker","owner":"2307vivek","description":"A highly customizable seekbar/slider library for android with support for readahead indicator, segments and more. Made with Jetpack Compose ❤.","archived":false,"fork":false,"pushed_at":"2025-05-08T00:10:50.000Z","size":401,"stargazers_count":395,"open_issues_count":18,"forks_count":16,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-08T01:21:32.038Z","etag":null,"topics":["android","android-library","jetpack-compose","jetpack-compose-library","kotlin","kotlin-android","seekbar","seekbar-android","slider"],"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/2307vivek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"zenodo":null},"funding":{"custom":["https://paypal.me/2307vivek?country.x=IN\u0026locale.x=en_GB"],"github":["2307vivek"]}},"created_at":"2023-01-30T12:40:47.000Z","updated_at":"2025-05-06T22:29:48.000Z","dependencies_parsed_at":"2023-11-07T11:29:50.374Z","dependency_job_id":"c7e0c65d-eac6-4992-82a2-e69a2b181dec","html_url":"https://github.com/2307vivek/Seeker","commit_stats":{"total_commits":201,"total_committers":3,"mean_commits":67.0,"dds":0.06467661691542292,"last_synced_commit":"e6e7ee26ca28484fbbbdcdf815687f13c090b818"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2307vivek%2FSeeker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2307vivek%2FSeeker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2307vivek%2FSeeker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/2307vivek%2FSeeker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/2307vivek","download_url":"https://codeload.github.com/2307vivek/Seeker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"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","android-library","jetpack-compose","jetpack-compose-library","kotlin","kotlin-android","seekbar","seekbar-android","slider"],"created_at":"2024-11-01T04:11:49.519Z","updated_at":"2025-05-16T06:07:35.308Z","avatar_url":"https://github.com/2307vivek.png","language":"Kotlin","funding_links":["https://paypal.me/2307vivek?country.x=IN\u0026locale.x=en_GB","https://github.com/sponsors/2307vivek"],"categories":[],"sub_categories":[],"readme":"# Seeker\n**Seeker** is a highly customizable seekbar/slider for Android with support for **readahead indicator** and **segments**. Made with Jetpack Compose ❤.\n\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/2307vivek/seeker/android.yml?style=for-the-badge)](https://github.com/2307vivek/Seeker/actions)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/2307vivek/seeker/publish.yml?label=Publish\u0026style=for-the-badge)]((https://github.com/2307vivek/Seeker/actions))\n\n\u003ca href=\"https://jetc.dev/issues/154.html\"\u003e\u003cimg src=\"https://img.shields.io/badge/As_Seen_In-jetc.dev_Newsletter_Issue_%23154-blue?logo=Jetpack+Compose\u0026amp;logoColor=white\" alt=\"Featured In - jetc.dev Newsletter Issue #154\"\u003e\u003c/a\u003e\n\n![seeker (2)](https://user-images.githubusercontent.com/67380664/218636012-ac49ae15-0f7f-4cfa-94be-0add7a9182c3.png)\n\n## Including in your project\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.2307vivek/seeker?style=for-the-badge)](https://search.maven.org/search?q=g:io.github.2307vivek)\n### Gradle\nAdd the dependency below to your **module**'s `build.gradle` file:\n```gradle\ndependencies {\n    implementation 'io.github.2307vivek:seeker:1.2.2'\n}\n```\n\n## How to use\nYou can create a Seeker with the `Seeker` composable.\n```kotlin\n@Composable\nfun Seeker(\n    modifier: Modifier = Modifier,\n    state: SeekerState = rememberSeekerState(),\n    value: Float,\n    range: ClosedFloatingPointRange\u003cFloat\u003e = 0f..1f,\n    readAheadValue: Float = range.start,\n    onValueChange: (Float) -\u003e Unit,\n    onValueChangeFinished: (() -\u003e Unit)? = null,\n    segments: List\u003cSegment\u003e = emptyList(),\n    enabled: Boolean = true,\n    colors: SeekerColors = SeekerDefaults.seekerColors(),\n    dimensions: SeekerDimensions = SeekerDefaults.seekerDimensions(),\n    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },\n)\n```\n\nIn its simplest form **seeker** can be used as a regular slider for selecting values from a range or showing progress in a range.\n\n```kotlin\nvar value by remember { mutableStateOf(0f) }\n\nSeeker(\n    value = value,\n    range = 1f..100f,\n    onValueChange = { value = it }\n)\n```\n![Screenshot_20230214-232222_Seeker](https://user-images.githubusercontent.com/67380664/218842981-4495f951-acd6-4838-ba5c-4f656ac65a17.jpg)\n\n### Read Ahead indicator\nA read-ahead indicator shows the amount of content that is already ready to use. It is particularly useful in media streaming apps where some media is downloaded ahead of time to avoid buffering. The `readAheadValue` property of the Seeker composable can be used to display the read ahead indicator.\n\n```kotlin\nvar value by remember { mutableStateOf(0f) }\nvar readAheadValue by remember { mutableStateOf(0f) }\n\nSeeker(\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    onValueChange = { value = it }\n)\n```\n![Screenshot_20230214-232319_Seeker](https://user-images.githubusercontent.com/67380664/218843315-5002d843-613c-4174-bd77-cec67c78c8da.jpg)\n\n### Creating Segments\nSeeker can break the track into different sections, which can be used to display different parts in the range. To create segments, a list of `Segment` needs to be passed in the `Seeker` composable.\n\n```kotlin\nval segments = listOf(\n    Segment(name = \"Intro\", start = 1f),\n    Segment(name = \"Part 1\", start = 40f),\n    Segment(name = \"Part 2\", start = 88f),\n)\n\nSeeker(\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    segments = segments,\n    onValueChange = { value = it }\n)\n```\n![Screenshot_20230214-232423_Seeker](https://user-images.githubusercontent.com/67380664/218843537-dcb59b6e-de88-493b-aaa1-af97126eafd0.jpg)\n\nThe `Segment` takes the `name` and the `start` value form which the segments shlould start. You can also pass an optional color parameter to each segment.\n\nThe first segment in the list **must start from the start point of the range, and all the segments must lie in the range** of the seeker, otherwise an `IllegalArgumentException` will be thrown to avoid unexpected behavior.\n\n**Segments** are by default separated by a gap in the track, which can be customized by passing a `dimensions` parameter in the composable.\n```kotlin\nSeeker(\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    segments = segments,\n    dimensions = SeekerDefaults.seekerDimensions(gap = 4.dp),\n    onValueChange = { value = it }\n)\n```\n\n### Observing current segment\nThe current segment corresponding to the current seeker value can be observed by using the `currentSegment` property of the `SeekerState` which can be created by using `rememberSeekerState()`.\n\n```kotlin\nval segments = listOf(\n    Segment(name = \"Intro\", start = 1f),\n    Segment(name = \"Part 1\", start = 40f),\n    Segment(name = \"Part 2\", start = 88f),\n)\n\nval state = rememberSeekerState()\n\nSeeker(\n    state = state,\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    segments = segments,\n    onValueChange = { value = it }\n)\n\n//Observing the current segment\nText(state.currentSegment.name)\n```\n![segments-3 (online-video-cutter com)](https://user-images.githubusercontent.com/67380664/218962032-eb8ecf66-1df8-458e-9f1a-fdcd39523d9d.gif)\n\n## Customizing Seeker\nSeeker is highly customizable in terms of its dimensions and colors. The `seekerColors()` and `seekerDimensions()` functions can be used to customise the colors and dimensions of the different parts of seeker.\n\nThe `seekerColors()` and `seekerDimensions()` functions are as follows:\n\n```kotlin\n@Composable\nfun seekerColors(\n    progressColor: Color = MaterialTheme.colors.primary,\n    trackColor: Color = TrackColor,\n    disabledProgressColor: Color = MaterialTheme.colors.onSurface.copy(alpha = DisabledProgressAlpha),\n    disabledTrackColor: Color = disabledProgressColor.copy(alpha = DisabledTrackAlpha).compositeOver(MaterialTheme.colors.onSurface),\n    thumbColor: Color = MaterialTheme.colors.primary,\n    disabledThumbColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled).compositeOver(MaterialTheme.colors.surface),\n    readAheadColor: Color = ReadAheadColor\n): SeekerColors\n\n@Composable\nfun seekerDimensions(\n    trackHeight: Dp = TrackHeight,\n    progressHeight: Dp = trackHeight,\n    thumbRadius: Dp = ThumbRadius,\n    gap: Dp = Gap\n): SeekerDimensions\n```\nThe seeker composable has parameters `colors` and `dimensions` which can be used to customize the colors and dimensions of the seeker respectively.\n\n```kotlin\nSeeker(\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    segments = segments,\n    colors = SeekerDefaults.colors(trackColor = customColor, thumbColor = customThumbColor, ...)\n    dimensions = SeekerDefaults.seekerDimensions(gap = 4.dp, thumbRadius = 12.dp, ...),\n    onValueChange = { value = it }\n)\n```\n\u003e **Note**: As of the current version, unexpected behaviors are noted when colors with an alpha value less than 1f are used in the seeker. You shluld avoid using transparent colors in seeker. See issue [#12](https://github.com/2307vivek/Seeker/issues/12).\n\nThe above functions are `@Composables` which means it will be recomposed when the parameters change. It can be used to animate the colors and dimensions of seeker.\n\n```kotlin\nval interactionSource = remember { MutableInteractionSource() }\nval isDragging by interactionSource.collectIsDraggedAsState()\n\nval gap by animateDpAsState(if (isDragging) 2.dp else 0.dp)\nval thumbRadius by animateDpAsState(if (isDragging) 10.dp else 0.dp)\n\nSeeker(\n    value = value,\n    readAheadValue = readAheadValue,\n    range = 1f..100f,\n    segments = segments,\n    interactionSource = interactionSource,\n    colors = SeekerDefaults.colors(trackColor = customColor, thumbColor = customThumbColor)\n    dimensions = SeekerDefaults.seekerDimensions(gap = gap, thumbRadius = thumbRadius),\n    onValueChange = { value = it }\n)\n```\n![interactions-1 (online-video-cutter com)](https://user-images.githubusercontent.com/67380664/218961219-d2db59e5-6219-4de7-80d4-c503b163182e.gif)\n\n### Using different value for thumb\nSeeker has the ability to provide a separate value for the thumb, which makes it possible to move the thumb independently of the progress.\n```kotlin\nvar value by remember{ mutableStateOf(0f) }\nvar thumbPosition by remember{ mutableStateOf(0f) }\n\nval isDragging by interactionSource.collectIsDraggedAsState()\n\nSeeker(\n    value = value,\n    thumbValue = if (isDragging) thumbPosition else value,\n    onValueChange = { thumbPosition = it },\n    onValueChangeFinished = { value = thumbPosition },\n    readAheadValue = readAheadValue,\n    interactionSource = interactionSource,\n    range = 1f..100f,\n    ...\n)\n```\n![f4d2d702-68c4-4ebb-8dd5-40f5996aa37f](https://github.com/2307vivek/Seeker/assets/67380664/3a72c58e-f3b7-4039-b0e0-57aa2e419df4)\n\n### Making two-way Seeker\nYou can also make a two-way slider by providing the start position as a fraction of the track width using the `progressStartPosition` parameter.\n```kotlin\nvar value by remember { mutableStateOf(0f) }\n\nSeeker(\n    value = value,\n    progressStartPosition = 0.3f,\n    range = 1f..100f,\n    onValueChange = { value = it }\n)\n```\n![Screenshot_20231127_135354_Seeker~2](https://github.com/2307vivek/Seeker/assets/67380664/43566c3d-05c9-42ed-a51f-213ee4a8ca1a)\n\n## Find this library useful? :heart:\nSupport it by joining __[stargazers](https://github.com/2307vivek/seeker/stargazers)__ for this repository. :star: \u003cbr\u003e\nAlso, follow me on __[github](https://github.com/2307vivek)__ and __[twitter](https://twitter.com/2307vivek)__ to stay updated with my creations! 🤩\n\n# License\n```xml\nCopyright 2023 Vivek Singh\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2307vivek%2Fseeker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F2307vivek%2Fseeker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F2307vivek%2Fseeker/lists"}