Slider in Jetpack Compose

Slider in jetpack compose allows users to select a value within a given range by dragging a thumb along a track. Jetpack Compose, the modern UI toolkit for Android, provides a straightforward and declarative way to implement sliders in your Android applications. In this blog, we will explore how to use the Slider Composable in Jetpack Compose to create dynamic and user-friendly sliders.

According to the Material 3 website, there are two types of sliders.

1. Continuous slider
2. Discrete slider

Basic Slider

The Slider Composable in Jetpack Compose is a flexible widget that simplifies the implementation of sliders in your app. Jetpack Compose provides several parameters to customize the behaviour and appearance of the Slider, making it highly adaptable to different use cases.

First of all, create a mutable variable to hold the slider value.

var sliderValue by remember { mutableStateOf(0f) }

Now, we will call the Slider Composable function.

 Slider(
        value = sliderValue,
        onValueChange = {sliderValue = it}
    )

In the above code, the Slider Composable takes sliderValue as the value parameter and a onValueChange callback to update the value of the sliderValue as the user interacts with the slider.

Now, we will create a text component to see the current value of the slider.

 Text(
       text = "Slider Value: $sliderValue",
       style = MaterialTheme.typography.bodyLarge
        )

The Slider value is showing as a float. We can convert it to the nearest int using the Kotlin function roundToInt().

Text(
            text = "Slider Value: ${(sliderValue * 10).roundToInt()}",
            style = MaterialTheme.typography.bodyLarge
        )

Disable Slider

The slider composable has a parameter enabled that controls the enabled state of the slider. When false, this component will not respond to user input. And it will appear visually disabled and disabled to accessibility services.

 Slider(
            value = sliderValue,
            onValueChange = {sliderValue = it},
            enabled = false
        )

Customizing the Slider

Jetpack Compose provides various optional parameters to customize the appearance and behaviour of the Slider composable. Let’s explore a few of them:

1. modifier: You can use the modifier parameter to apply styling or layout modifications to the Slider composable. For example, you can add padding, change the size, or apply custom styling.

1. Range of Slider

In the slider composable valueRange parameter allows you to specify the range of values that the slider can take. For example, valueRange = 0f..100f sets the range from 0 to 100.

Slider(
      value = sliderValue,
      onValueChange = {sliderValue = it},
      valueRange = 0f..100f
   )

2. Step of Slider

If steps parameter is greater than 0, specifies the amount of discrete allowable values, evenly distributed across the whole value range. If 0, the slider will behave continuously and allow any value from the range specified. It must not be negative. In the below code, steps parameter is set to 5 and this means there would be 5 steps or dots between starting value and the final value.

Slider(
     value = sliderValue,
     onValueChange = {sliderValue = it},
     valueRange = 0f..100f,
     steps = 5
   )

3. Color of the Slider

Slider(
        value = sliderValue,
        onValueChange = {sliderValue = it},
        colors = SliderDefaults.colors(
           thumbColor = Color.Green,
           activeTrackColor = Color.Cyan,
           inactiveTrackColor = Color.Yellow
        )
    )

In the above code, colors parameter can take many more parameters like activeTickColor, inactiveTickColor, disabledThumbColor etc. Explore yourself because it’s the best way to learn.

Conclusion:

In this blog post, we explored how to use the Slider composable in Jetpack Compose to create sliders in Android applications. The Slider Composable provides a simple and declarative way to implement sliders while allowing for customization to suit your app’s needs. By leveraging Slider Composable, you can enhance the user experience of your Android application.

Some Useful Links

Material 3

Checkbox in Jetpack Compose

Happy Composing 🙂