Skip to content

Latest commit

 

History

History
106 lines (98 loc) · 3.3 KB

README.md

File metadata and controls

106 lines (98 loc) · 3.3 KB
Raw

NumberSlider for Jetpack Compose

Release

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.

Preview

Features

  • 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.

Getting Started

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.

Step 1. In your settings.gradle.kts file, add the JitPack repository.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { setUrl("https://www.jitpack.io") } // Add this line
    }
}

Step 2. Add the NumberSlider dependency.

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.

Usage

var selectedValue by remember { mutableStateOf(50f) }

NumberSlider(
    value = selectedValue,
    minValue = 0, maxValue = 100,
    step = 0.5f,
    onValueChange = { newValue ->
        selectedValue = newValue
    }
)

Customization

Indicator

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
)

Ruler markers

Provide a custom composable function for ruler markers:

NumberSlider(
    // ... other parameters
    rulerMarker = {
        Box(
            modifier = Modifier
                .width(2.dp)
                .height(20.dp)
                .background(Color.Gray)
        )
    }
)

Center marker

Customize the center marker with a composable function:

NumberSlider(
    // ... other parameters
    centerMarker = {
        Icon(
            imageVector =Icons.Filled.ArrowDropDown,
            contentDescription = null,
            tint = Color.Black
        )
    }
)

Documentation

For detailed API documentation, refer to the KDoc comments in the source code.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve this library.

License

This library is licensed under the GNU GPLv3.0 license.