Labeled Range Slider

The Labeled Range Slider allows a user to select an upper and lower bound of a range, while showing the available values as labels aligned correctly with the steps on a slider

Usage

val steps = (0..100).step(10).toList()
var lowerBound by rememberSaveable { mutableStateOf(steps[1]) }
var upperBound by rememberSaveable { mutableStateOf(steps[steps.size - 2]) }

LabeledRangeSlider(
	selectedLowerBound = lowerBound,
	selectedUpperBound = upperBound,
	steps = steps,
	onRangeChanged = { lower, upper ->
		lowerBound = lower
		upperBound = upper
		Log.i(LOG_TAG, "Updated selected range ${lowerBound..upperBound}")
	},
	modifier = Modifier.fillMaxWidth()
)

Required parameters:

• The selected lower value
• The selected upper value
• All available values
• A callback to get notified of value changes

Also there is an optinal parameter sliderConfig, which allows the customization of the Labeled Range Slider, like

• The height of the slider bar
• The color of the slider bar, in range and out of range
• The size of the touch handles
• The color of the touch handles

and more. You can see the full configuration in the SliderConfiguration class

How it was implemented

If you are interessed in the implementation details and some thoughts bind it, check out the following two blog posts

• Drawing the Labeled Range Slider
• Make the Labeled Range Slider interactive