ChromaDial

Features

Full Customization

Customize both the thumb and track with your own composables. Create volume knobs, timers, gauges, or any circular control you can imagine.

Flexible Arcs

Full circles, semi-circles, or any arc range. Define start and sweep angles easily.

Step Snapping

Discrete values for precise selection. Perfect for settings and mode selectors.

Normalized Values

Access 0-1 normalized values for easy integration with any scale or unit.

Interaction Source

Track hover and drag states with MutableInteractionSource for rich feedback.

Multiplatform

Built with Compose Multiplatform. Deploy to Android, iOS, Desktop (JVM), and Web from a single codebase. True write-once, run-anywhere circular controls.

Draw Utilities

Helper functions to draw tick marks, labels, and step indicators around your dial.

Overshot Tracking

Know when users drag beyond limits for rubber-band effects and haptic feedback.

Quick Example

var degree by remember { mutableFloatStateOf(180f) }

Dial(
    degree = degree,
    onDegreeChanged = { degree = it },
    modifier = Modifier.size(200.dp),
    startDegrees = 0f,
    sweepDegrees = 360f,
)