To Use Slider Components in Jetpack Compose

Overview

The Slider composable in Jetpack Compose enables users to select from a range of values, ideal for adjusting settings like volume or brightness, filtering data such as price ranges, or providing input like ratings. The slider includes a track, a draggable thumb, optional tick marks, and a value label.

This guide demonstrates how to implement basic, advanced, and range sliders with customization options and best practices for 2025.

Slider Use Cases Table

Type	Usage Examples
Basic Slider	Adjust volume, set brightness, select rating
Advanced Slider	Discrete steps for specific values, custom tick marks
Range Slider	Select price range, filter data by min/max values

Version Compatibility & Dependencies

This implementation requires a minimum SDK of API level 21 (Android 5.0). Add the Compose BOM to your project:

dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.05.00"))
    implementation("androidx.compose.material3:material3")
}
    

Ensure your app uses a Material 3 theme, such as MaterialTheme. Refer to the Material 3 Slider Guidelines for details.

Creating Slider Components in Jetpack Compose

Basic Slider Example

Creates a continuous slider with a range from 0.0 to 1.0.

import androidx.compose.material3.Slider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember

@Composable
fun BasicSliderExample() {
    val sliderValue = remember { mutableFloatStateOf(0f) }
    Slider(
        value = sliderValue.value,
        onValueChange = { sliderValue.value = it },
        valueRange = 0f..1f
    )
}
    

Result: A continuous slider allowing selection of any value between 0.0 and 1.0.

Figure 1. A basic implementation of a slider.

---

Advanced Slider Example

Creates a discrete slider with three steps over a range from 0.0 to 50.0.

import androidx.compose.material3.Slider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember

@Composable
fun AdvancedSliderExample() {
    val sliderValue = remember { mutableFloatStateOf(0f) }
    Slider(
        value = sliderValue.value,
        onValueChange = { sliderValue.value = it },
        valueRange = 0f..50f,
        steps = 3
    )
}
    

Result: A discrete slider with four selectable values (0, 12.5, 25, 37.5, 50) due to three steps.

Figure 2. A slider with steps and a set value range.

---

Range Slider Example

Creates a continuous range slider for selecting a minimum and maximum value.

import androidx.compose.material3.RangeSlider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.unit.ClosedFloatingPointRange

@Composable
fun RangeSliderExample() {
    val range = remember { mutableStateOf(0f..100f) }
    RangeSlider(
        value = range.value,
        onValueChange = { range.value = it },
        valueRange = 0f..100f
    )
}
    

Result: A range slider allowing selection of a minimum and maximum value between 0.0 and 100.0.

Figure 3. An implementation of a range slider.

---

Key Points for Implementation

• value: Defines the current value of the slider (or range for RangeSlider).
• onValueChange: Callback triggered when the slider value changes.
• enabled: Determines if the slider is interactive (true) or disabled (false).
• colors: Customizes thumb and track colors using SliderDefaults.colors.
• valueRange: Sets the range of selectable values (e.g., 0f..100f).
• steps: Defines the number of discrete intervals for a slider (excluding start and end).
• Accessibility: Ensure a 48dp touch target for the thumb and use contentDescription for screen readers.

Theming Sliders

Customize Slider appearance using MaterialTheme in Compose to define a custom color scheme or apply specific colors via SliderDefaults.colors.

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color

@Composable
fun ThemedSliderExample() {
    val sliderValue = remember { mutableFloatStateOf(0f) }
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF1767D0)
        )
    ) {
        Slider(
            value = sliderValue.value,
            onValueChange = { sliderValue.value = it },
            valueRange = 0f..100f,
            colors = SliderDefaults.colors(
                thumbColor = Color(0xFF1767D0),
                activeTrackColor = Color(0xFF4A90E2)
            )
        )
    }
}
    

FAQ

What is a Slider component?

A component with a track and draggable thumb for selecting a value or range within defined limits.

---

Which composable is used for a Slider?

Use Slider for a single-value slider or RangeSlider for selecting a range.

---

How to make Sliders accessible?

Ensure a 48dp touch target for the thumb and use contentDescription for screen readers.

---

Can I customize Slider colors?

Yes, via SliderDefaults.colors for thumb and track or a custom MaterialTheme.colorScheme.

---

What is the minimum SDK required?

API level 21 (Android 5.0).