How to Build a Custom Styled Slider with Jetpack Compose

What You Will Build

A screen with two custom-styled sliders: a primary slider using default Material3 theming and a secondary slider with custom orange colors. Both display their current percentage value prominently, and a card at the bottom shows the precise decimal values. This teaches you how to customize SliderDefaults.colors() and display real-time slider feedback.

Why This Pattern Matters

Sliders are used everywhere: volume controls, brightness settings, filter parameters, and price ranges. The Material3 Slider composable is highly customizable through its color parameters, letting you match any brand palette without building from scratch.

The Custom Slider Screen

@Composable
fun CustomSliderScreen() {
    var value by remember { mutableFloatStateOf(0.5f) }
    var value2 by remember { mutableFloatStateOf(0.3f) }

    Column(
        modifier = Modifier.fillMaxSize().padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Custom Slider",
            style = MaterialTheme.typography.headlineSmall,
            fontWeight = FontWeight.Bold)
        Spacer(Modifier.height(40.dp))

        // Primary slider with large percentage display
        Text("${'$'}{(value * 100).toInt()}%",
            fontSize = 48.sp, fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.primary)
        Spacer(Modifier.height(16.dp))
        Slider(value = value, onValueChange = { value = it })

        Spacer(Modifier.height(24.dp))

        // Secondary slider with custom colors
        Text("Secondary: ${'$'}{(value2 * 100).toInt()}%",
            fontSize = 20.sp, fontWeight = FontWeight.Medium)
        Slider(
            value = value2,
            onValueChange = { value2 = it },
            colors = SliderDefaults.colors(
                thumbColor = Color(0xFFFF9800),
                activeTrackColor = Color(0xFFFF9800)
            )
        )

        Spacer(Modifier.height(32.dp))

        // Summary card
        Card(modifier = Modifier.fillMaxWidth()) {
            Column(Modifier.padding(16.dp)) {
                Text("Value 1: ${'$'}{String.format("%.2f", value)}",
                    style = MaterialTheme.typography.bodyLarge)
                Text("Value 2: ${'$'}{String.format("%.2f", value2)}",
                    style = MaterialTheme.typography.bodyLarge)
            }
        }
    }
}

Tips and Pitfalls

• SliderDefaults.colors() exposes thumbColor, activeTrackColor, inactiveTrackColor, and more for full customization.
• mutableFloatStateOf (not mutableStateOf) is the optimized primitive holder for Float values in Compose.
• valueRange parameter: For non-0-to-1 ranges, pass valueRange = 0f..100f to the Slider.
• Steps parameter: Add steps = 9 to create discrete snap points (11 total positions including start and end).