In today’s tutorial, we will learn about Slider in KMP KMM Kotlin Compose Multiplatform for both Android & iOS platforms. We will learn about the Basic and range slider and their properties for customizing the slider view.

Slider in KMP KMM Compose Multiplatform Tutorial:

In Kotlin, Compose multiplatform, the Slider component allows us to select a value from a defined range by dragging a handle present on a slide. The purpose of the slider is to give the user control over settings like volume control, music video backwards and forward functionality, set device brightness and selecting a specific value within a given range.

Creating Slider in KMP(KMM):

In Kotlin Compose multiplatform, we have to define the Slider component.

Code explanation:

• sliderPosition: This state holds the slider value by default in Float.
• value: To set default slider value.
• onValueChange: Calls every time the user drags the slider and updates the value into the slider position state.

Complete code:

Screenshot:

Set Slider values within a Range:

We must use the valueRange property to set the Slider value within a defined range.

• valueRange = 0f..100f: In this example, we set the slider value range from 0 to 100 in Float type.

Screenshot:

Get Slider value without decimal points in Integer type:

By default, the slider works only with floating values. However, to display its values without decimal points, we must explicitly convert the float values into integers. We will use the toInt() method.

Screenshot:

Create Slider with Steps:

By default, when we create a slider component, it moves freely to any position. We can also divide the slider into multiple steps. So, it always moves to the step based on the middle drag location. The steps property is used to create multiple steps in Slider.

Screenshot:

Customize Slider Thumb, Track colors:

The SliderDefaults.colors() property is used to set all colors in the Slider component. It has multiple sub-properties.

1. thumbColor: Slider thumb colour when the slider is enabled.
2. activeTrackColor: The color of the track part, which is active, means the thumb is ahead of that part.
3. inactiveTrackColor: The color of the track part, which is inactive, means the thumb is before that part.
4. inactiveTickColor: The color used to draw tick marks on the inactive track.
5. disabledThumbColor: Thumb color when Slider is disabled.
6. activeTickColor: The colour used to draw a tick mark on an active track.
7. disabledActiveTrackColor: Color of the active part of the track when Slider is disabled.
8. disabledActiveTickColor: Color draw on the tick mark in the active track when Slider is disabled.
9. disabledInactiveTickColor: Color draw on the tick mark on the inactive part of the track when the slider is disabled.
10. disabledInactiveTrackColor: Color of the track in active part when Slider is disabled.

Screenshot:

Disabled Slider:

To disable the slider component in KMP KMM Compose Multiplatform. We will use its property enabled.

• enabled = false: Disable the Slider component.

Screenshot:

RangeSlider in KMP KMM:

By default, the Slider widget has only 1 thumb drag option, and we can only get a single output from him. However, the RangeSlider component allows us to select 2 values, Starting and Ending, separately. You have seen this type of Slider in E-Commerce applications where you set the minimum and maximum price.

Output:

Complete source code:

Screenshot in iOS device: