A customizable number slider component for Jetpack Compose, allowing users to select numeric values within a defined range.
This is heavily inspired by kidinov's Simple-Number-Picker.
- Snapping: Provides snapping to discrete values.
- Customizable Appearance: Easily customize the appearance of value indicators, ruler markers, and the center marker.
- Text Field Integration: Includes a text field for direct input and synchronization with the slider.
Important
The minimum required SDK for this library is set to 34 as I am using this, for now, for my personal project. If you would like this library to be compatible with a lower SDK version, feel free to open an issue, or better yet, you can implement it yourself.
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { setUrl("https://www.jitpack.io") } // Add this line
}
}
In your version catalog file (libs.versions.toml
),
[versions]
numberslider = "[latest-version]"
[libraries]
numberslider = { module = "com.github.LeeWeeder:number-slider", version.ref = "numberslider"}
In your module build.gradle
,
dependencies {
implementation(libs.numberslider)
}
Sync your project.
var selectedValue by remember { mutableStateOf(50f) }
NumberSlider(
value = selectedValue,
minValue = 0, maxValue = 100,
step = 0.5f,
onValueChange = { newValue ->
selectedValue = newValue
}
)
Customize the appearance of value indicators using the IndicatorProperties class:
val indicatorProperties = IndicatorProperties(
defaultStyle = MaterialTheme.typography.bodyLarge,
selectedStyle = MaterialTheme.typography.headlineMedium.copy(color = Color.Red)
)
NumberSlider(
// ... other parameters
indicatorProperties = indicatorProperties
)
Provide a custom composable function for ruler markers:
NumberSlider(
// ... other parameters
rulerMarker = {
Box(
modifier = Modifier
.width(2.dp)
.height(20.dp)
.background(Color.Gray)
)
}
)
Customize the center marker with a composable function:
NumberSlider(
// ... other parameters
centerMarker = {
Icon(
imageVector =Icons.Filled.ArrowDropDown,
contentDescription = null,
tint = Color.Black
)
}
)
For detailed API documentation, refer to the KDoc comments in the source code.
Contributions are welcome! Feel free to open issues or submit pull requests to improve this library.
This library is licensed under the GNU GPLv3.0 license.