Slider

Slider is a basic interactive component in Miuix used for selecting values within a continuous range. Users can adjust values by dragging the slider, making it suitable for scenarios such as volume adjustment, brightness control, and progress display.

Miuix also provides VerticalSlider for vertical orientation and RangeSlider for selecting a range of values.

Import

import top.yukonga.miuix.kmp.basic.Slider
import top.yukonga.miuix.kmp.basic.VerticalSlider
import top.yukonga.miuix.kmp.basic.RangeSlider

Basic Usage

Slider

var sliderValue by remember { mutableFloatStateOf(0.5f) }

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

VerticalSlider

var sliderValue by remember { mutableFloatStateOf(0.5f) }

VerticalSlider(
    value = sliderValue,
    onValueChange = { sliderValue = it },
    modifier = Modifier.height(200.dp)
)

RangeSlider

var rangeValue by remember { mutableStateOf(0.2f..0.8f) }

RangeSlider(
    value = rangeValue,
    onValueChange = { rangeValue = it }
)

Component States

Disabled State

var value by remember { mutableFloatStateOf(0.5f) }

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

Haptic Feedback

Slider supports haptic feedback, which can be customized through the hapticEffect parameter. See SliderHapticEffect for details.

var value by remember { mutableFloatStateOf(0.5f) }

Slider(
    value = value,
    onValueChange = { value = it },
    hapticEffect = SliderHapticEffect.Step
)

Properties

Slider Properties

Property Name	Type	Description	Default Value	Required
value	Float	Current value of the slider. If outside of valueRange provided, value will be coerced to this range	-	Yes
onValueChange	(Float) -> Unit	Callback when value changes	-	Yes
modifier	Modifier	Modifier applied to the slider	Modifier	No
enabled	Boolean	Whether the slider is enabled	true	No
valueRange	ClosedFloatingPointRange<Float>	Range of values that this slider can take. The passed value will be coerced to this range	0f..1f	No
steps	Int	Amount of discrete allowable values. If 0, the slider will behave continuously. Must not be negative	0	No
onValueChangeFinished	(() -> Unit)?	Called when value change has ended	null	No
reverseDirection	Boolean	Controls the direction of slider. When false (default), follows LayoutDirection (L-R in LTR, R-L in RTL). When true, reverses the direction.	false	No
height	Dp	Height of the slider	SliderDefaults.MinHeight	No
colors	SliderColors	Color configuration of the slider	SliderDefaults.sliderColors()	No
hapticEffect	SliderDefaults.SliderHapticEffect	Type of haptic feedback	SliderDefaults.DefaultHapticEffect	No
showKeyPoints	Boolean	Whether to show key point indicators on the slider. Only works when keyPoints is not null	false	No
keyPoints	List<Float>?	Custom key point values to display on the slider. If null, uses step positions from steps parameter. Values should be within valueRange	null	No
magnetThreshold	Float	Magnetic snap threshold as a fraction (0.0 to 1.0). When slider value is within this distance from a key point, it will snap to that point. Only applies when keyPoints is set	0.02f	No

VerticalSlider Properties

Property Name	Type	Description	Default Value	Required
value	Float	Current value of the slider	-	Yes
onValueChange	(Float) -> Unit	Callback when value changes	-	Yes
modifier	Modifier	Modifier applied to the slider	Modifier	No
enabled	Boolean	Whether the slider is enabled	true	No
valueRange	ClosedFloatingPointRange<Float>	Range of values that this slider can take	0f..1f	No
steps	Int	Amount of discrete allowable values	0	No
onValueChangeFinished	(() -> Unit)?	Called when value change has ended	null	No
reverseDirection	Boolean	Controls the direction of slider. When false, increases bottom to top. When true, increases top to bottom	false	No
width	Dp	Width of the vertical slider	SliderDefaults.MinHeight	No
colors	SliderColors	Color configuration of the slider	SliderDefaults.sliderColors()	No
effect	Boolean	Whether to show special effects	false	No
hapticEffect	SliderDefaults.SliderHapticEffect	Type of haptic feedback	SliderDefaults.DefaultHapticEffect	No
showKeyPoints	Boolean	Whether to show key point indicators on the slider. Only works when keyPoints is not null	false	No
keyPoints	List<Float>?	Custom key point values to display on the slider. If null, uses step positions from steps parameter. Values should be within valueRange	null	No
magnetThreshold	Float	Magnetic snap threshold as a fraction (0.0 to 1.0). When slider value is within this distance from a key point, it will snap to that point. Only applies when keyPoints is set	0.02f	No

RangeSlider Properties

Property Name	Type	Description	Default Value	Required
value	ClosedFloatingPointRange<Float>	Current values of the RangeSlider. If either value is outside of valueRange, it will be coerced	-	Yes
onValueChange	(ClosedFloatingPointRange<Float>) -> Unit	Lambda in which values should be updated	-	Yes
modifier	Modifier	Modifier applied to the slider	Modifier	No
enabled	Boolean	Whether the slider is enabled	true	No
valueRange	ClosedFloatingPointRange<Float>	Range of values that Range Slider values can take	0f..1f	No
steps	Int	Amount of discrete allowable values	0	No
onValueChangeFinished	(() -> Unit)?	Called when value change has ended	null	No
height	Dp	Height of the slider	SliderDefaults.MinHeight	No
colors	SliderColors	Color configuration of the slider	SliderDefaults.sliderColors()	No
hapticEffect	SliderDefaults.SliderHapticEffect	Type of haptic feedback	SliderDefaults.DefaultHapticEffect	No
showKeyPoints	Boolean	Whether to show key point indicators on the slider. Only works when keyPoints is not null	false	No
keyPoints	List<Float>?	Custom key point values to display on the slider. If null, uses step positions from steps parameter. Values should be within valueRange	null	No
magnetThreshold	Float	Magnetic snap threshold as a fraction (0.0 to 1.0). When slider value is within this distance from a key point, it will snap to that point. Only applies when keyPoints is set	0.02f	No

SliderDefaults Object

The SliderDefaults object provides default configurations for the Slider component.

Constants

Constant Name	Type	Default Value	Description
MinHeight	Dp	28.dp	Default height of the slider
KeyPointRadius	Dp	3.855.dp	Default radius of key points
DefaultHapticEffect	SliderHapticEffect	SliderHapticEffect.Edge	Default haptic feedback type

SliderHapticEffect

Value	Description
None	No haptic feedback
Edge	Haptic feedback at edges
Step	Haptic feedback at each step

Methods

Method Name	Return Type	Description
sliderColors()	SliderColors	Creates default color configuration

SliderColors Class

Property Name	Type	Description
foregroundColor	Color	Foreground color of the slider
disabledForegroundColor	Color	Foreground color when disabled
backgroundColor	Color	Background color of the slider
disabledBackgroundColor	Color	Background color when disabled
thumbColor	Color	Thumb color
disabledThumbColor	Color	Thumb color when disabled
keyPointColor	Color	Color of key point indicators in background
keyPointForegroundColor	Color	Color of key point indicators in foreground

Advanced Usage

Custom Value Range

var temperature by remember { mutableFloatStateOf(25f) }

Column {
    Text("Temperature: ${temperature.roundToInt()}°C")
    Slider(
        value = temperature,
        onValueChange = { temperature = it },
        valueRange = 16f..32f
    )
}

Discrete Steps

var rating by remember { mutableFloatStateOf(3f) }

Column {
    Text("Rating: ${rating.roundToInt()}/5")
    Slider(
        value = rating,
        onValueChange = { rating = it },
        valueRange = 1f..5f,
        steps = 3  // Creates 5 discrete values: 1, 2, 3, 4, 5
    )
}

Custom Colors

var volume by remember { mutableFloatStateOf(0.7f) }

Slider(
    value = volume,
    onValueChange = { volume = it },
    colors = SliderDefaults.sliderColors(
        foregroundColor = Color.Red,
        backgroundColor = Color.LightGray
    )
)

Custom Height

var brightness by remember { mutableFloatStateOf(0.8f) }

Slider(
    value = brightness,
    onValueChange = { brightness = it },
    height = 40.dp
)

Slider with Haptic Feedback

var value by remember { mutableFloatStateOf(0.5f) }

Slider(
    value = value,
    onValueChange = { value = it },
    hapticEffect = SliderDefaults.SliderHapticEffect.Step
)

VerticalSlider with Reverse Direction

var volume by remember { mutableFloatStateOf(0.5f) }

VerticalSlider(
    value = volume,
    onValueChange = { volume = it },
    modifier = Modifier.height(200.dp),
    reverseDirection = true  // Top to bottom
)

RangeSlider for Price Filter

var priceRange by remember { mutableStateOf(100f..500f) }

Column {
    Text("Price: $${priceRange.start.roundToInt()} - $${priceRange.endInclusive.roundToInt()}")
    RangeSlider(
        value = priceRange,
        onValueChange = { priceRange = it },
        valueRange = 0f..1000f,
        steps = 99  // 101 discrete values from 0 to 1000
    )
}

Complete Example with Value Change Callback

var value by remember { mutableFloatStateOf(0.5f) }
var finalValue by remember { mutableFloatStateOf(0.5f) }

Column {
    Text("Current: $value")
    Text("Final: $finalValue")
    Slider(
        value = value,
        onValueChange = { value = it },
        onValueChangeFinished = { finalValue = value },
        valueRange = 0f..100f,
        steps = 99
    )
}

Slider with Custom Key Points

var value by remember { mutableFloatStateOf(50f) }

Column {
    Text("Value: ${value.roundToInt()}")
    Slider(
        value = value,
        onValueChange = { value = it },
        valueRange = 0f..100f,
        showKeyPoints = true,
        keyPoints = listOf(0f, 25f, 50f, 75f, 100f),
        magnetThreshold = 0.05f,  // 5% snap threshold
        hapticEffect = SliderDefaults.SliderHapticEffect.Step
    )
}

RangeSlider with Key Points

var range by remember { mutableStateOf(20f..80f) }

Column {
    Text("Range: ${range.start.roundToInt()} - ${range.endInclusive.roundToInt()}")
    RangeSlider(
        value = range,
        onValueChange = { range = it },
        valueRange = 0f..100f,
        showKeyPoints = true,
        keyPoints = listOf(0f, 20f, 40f, 60f, 80f, 100f),
        magnetThreshold = 0.03f
    )
}

Changelog

Last edited 5 months ago

View full history

0b7ec07-library: refactor: unify dropdown and spinner components (#315)

c8075f9-library: Improve RTL support

cbb060c-refactor: Replicate HyperOS3 Switch Effect

4007f40-docs: fix errors

92830c0-library: improved Monet color 2

233ade0-docs: Add missing SliderColors

e76a68c-library: refactor Slider component (#132)

752f3df-docs: Preview for components in documentation website (#80)

6b3526e-docs: Fix document page hyperlink issue

7b99e64-docs: Add English version through AI translation

ab6bb69-chore: Add documents (#63)