Merge "[Slider] API Council Feedback" into androidx-main
diff --git a/compose/material3/material3/api/public_plus_experimental_current.txt b/compose/material3/material3/api/public_plus_experimental_current.txt
index c580cf9..dedbef4 100644
--- a/compose/material3/material3/api/public_plus_experimental_current.txt
+++ b/compose/material3/material3/api/public_plus_experimental_current.txt
@@ -987,6 +987,7 @@
@androidx.compose.runtime.Stable public final class SliderDefaults {
method @androidx.compose.runtime.Composable public void Thumb(androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.compose.ui.Modifier modifier, optional androidx.compose.material3.SliderColors colors, optional boolean enabled, optional long thumbSize);
method @androidx.compose.runtime.Composable public void Track(androidx.compose.material3.SliderPositions sliderPositions, optional androidx.compose.ui.Modifier modifier, optional androidx.compose.material3.SliderColors colors, optional boolean enabled);
+ method @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Composable public void Track(androidx.compose.material3.SliderState sliderState, optional androidx.compose.ui.Modifier modifier, optional androidx.compose.material3.SliderColors colors, optional boolean enabled);
method @androidx.compose.runtime.Composable public androidx.compose.material3.SliderColors colors(optional long thumbColor, optional long activeTrackColor, optional long activeTickColor, optional long inactiveTrackColor, optional long inactiveTickColor, optional long disabledThumbColor, optional long disabledActiveTrackColor, optional long disabledActiveTickColor, optional long disabledInactiveTrackColor, optional long disabledInactiveTickColor);
field public static final androidx.compose.material3.SliderDefaults INSTANCE;
}
@@ -995,7 +996,8 @@
method @androidx.compose.runtime.Composable public static void RangeSlider(kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> value, kotlin.jvm.functions.Function1<? super kotlin.ranges.ClosedFloatingPointRange<java.lang.Float>,kotlin.Unit> onValueChange, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional int steps, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished, optional androidx.compose.material3.SliderColors colors);
method @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Composable public static void RangeSlider(kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> value, kotlin.jvm.functions.Function1<? super kotlin.ranges.ClosedFloatingPointRange<java.lang.Float>,kotlin.Unit> onValueChange, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished, optional androidx.compose.material3.SliderColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource startInteractionSource, optional androidx.compose.foundation.interaction.MutableInteractionSource endInteractionSource, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderPositions,kotlin.Unit> startThumb, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderPositions,kotlin.Unit> endThumb, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderPositions,kotlin.Unit> track, optional int steps);
method @androidx.compose.runtime.Composable public static void Slider(float value, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional int steps, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished, optional androidx.compose.material3.SliderColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource);
- method @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Composable public static void Slider(float value, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished, optional androidx.compose.material3.SliderColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderPositions,kotlin.Unit> thumb, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderPositions,kotlin.Unit> track, optional int steps);
+ method @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Composable public static void Slider(float value, kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit> onValueChange, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished, optional androidx.compose.material3.SliderColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional int steps, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderState,kotlin.Unit> thumb, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderState,kotlin.Unit> track, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange);
+ method @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Composable public static void Slider(androidx.compose.material3.SliderState state, optional androidx.compose.ui.Modifier modifier, optional boolean enabled, optional androidx.compose.material3.SliderColors colors, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderState,kotlin.Unit> thumb, optional kotlin.jvm.functions.Function1<? super androidx.compose.material3.SliderState,kotlin.Unit> track);
}
@androidx.compose.runtime.Stable public final class SliderPositions {
@@ -1006,6 +1008,20 @@
property public final float[] tickFractions;
}
+ @androidx.compose.material3.ExperimentalMaterial3Api @androidx.compose.runtime.Stable public final class SliderState {
+ ctor public SliderState(optional float initialValue, optional kotlin.jvm.functions.Function1<? super java.lang.Float,kotlin.Unit>? initialOnValueChange, optional int steps, optional kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished);
+ method public kotlin.jvm.functions.Function0<kotlin.Unit>? getOnValueChangeFinished();
+ method public int getSteps();
+ method public float getValue();
+ method public kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> getValueRange();
+ method public void setOnValueChangeFinished(kotlin.jvm.functions.Function0<kotlin.Unit>?);
+ method public void setValue(float);
+ property public final kotlin.jvm.functions.Function0<kotlin.Unit>? onValueChangeFinished;
+ property public final int steps;
+ property public final float value;
+ property public final kotlin.ranges.ClosedFloatingPointRange<java.lang.Float> valueRange;
+ }
+
@androidx.compose.runtime.Stable public interface SnackbarData {
method public void dismiss();
method public androidx.compose.material3.SnackbarVisuals getVisuals();
diff --git a/compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/SliderSamples.kt b/compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/SliderSamples.kt
index 154bdd2..56e258c 100644
--- a/compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/SliderSamples.kt
+++ b/compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/SliderSamples.kt
@@ -28,6 +28,7 @@
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.SliderState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
@@ -88,7 +89,7 @@
value = sliderPosition,
onValueChange = { sliderPosition = it },
valueRange = 0f..5f,
- steps = 4,
+ steps = 10,
onValueChangeFinished = {
// launch some business logic update with the state you hold
// viewModel.updateSelectedSliderValue(sliderPosition)
@@ -110,20 +111,22 @@
@Sampled
@Composable
fun SliderWithCustomTrackAndThumb() {
- var sliderPosition by remember { mutableStateOf(0f) }
- val interactionSource = MutableInteractionSource()
- val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
- Column {
- Text(text = sliderPosition.toString())
- Slider(
- modifier = Modifier.semantics { contentDescription = "Localized Description" },
- value = sliderPosition,
- onValueChange = { sliderPosition = it },
+ val sliderState = remember {
+ SliderState(
valueRange = 0f..100f,
onValueChangeFinished = {
// launch some business logic update with the state you hold
// viewModel.updateSelectedSliderValue(sliderPosition)
- },
+ }
+ )
+ }
+ val interactionSource = MutableInteractionSource()
+ val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
+ Column {
+ Text(text = sliderState.value.toString())
+ Slider(
+ state = sliderState,
+ modifier = Modifier.semantics { contentDescription = "Localized Description" },
interactionSource = interactionSource,
thumb = {
SliderDefaults.Thumb(
@@ -131,17 +134,16 @@
colors = colors
)
},
- track = { sliderPositions ->
+ track = {
SliderDefaults.Track(
colors = colors,
- sliderPositions = sliderPositions
+ sliderState = sliderState
)
}
)
}
}
-@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Sampled
@Composable
@@ -162,7 +164,6 @@
}
}
-@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Sampled
@Composable
diff --git a/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/SliderTest.kt b/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/SliderTest.kt
index ee8d7f5..0576f34 100644
--- a/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/SliderTest.kt
+++ b/compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/SliderTest.kt
@@ -676,7 +676,7 @@
modifier = Modifier.testTag(tag),
value = state.value,
onValueChange = { state.value = it },
- thumb = { sliderPositions -> recompositionCounter.OuterContent(sliderPositions) }
+ thumb = { sliderState -> recompositionCounter.OuterContent(sliderState) }
)
}
@@ -704,7 +704,7 @@
modifier = Modifier.testTag(tag),
value = state.value,
onValueChange = { state.value = it },
- track = { sliderPositions -> recompositionCounter.OuterContent(sliderPositions) }
+ track = { sliderState -> recompositionCounter.OuterContent(sliderState) }
)
}
@@ -959,7 +959,6 @@
}
}
- @OptIn(ExperimentalMaterial3Api::class)
@Test
fun rangeSlider_drag_out_of_bounds_rtl() {
val state = mutableStateOf(0f..1f)
@@ -1208,8 +1207,8 @@
@Test
fun rangeSlider_thumb_recomposition() {
val state = mutableStateOf(0f..100f)
- val startRecompositionCounter = SliderRecompositionCounter()
- val endRecompositionCounter = SliderRecompositionCounter()
+ val startRecompositionCounter = RangeSliderRecompositionCounter()
+ val endRecompositionCounter = RangeSliderRecompositionCounter()
rule.setContent {
RangeSlider(
@@ -1246,7 +1245,7 @@
@Test
fun rangeSlider_track_recomposition() {
val state = mutableStateOf(0f..100f)
- val recompositionCounter = SliderRecompositionCounter()
+ val recompositionCounter = RangeSliderRecompositionCounter()
rule.setContent {
RangeSlider(
@@ -1302,7 +1301,7 @@
}
@Stable
-class SliderRecompositionCounter {
+class RangeSliderRecompositionCounter {
var innerRecomposition = 0
var outerRecomposition = 0
@@ -1322,4 +1321,26 @@
SideEffect { ++innerRecomposition }
Text("InnerContent: ${sliderPositions.activeRange}")
}
-}
\ No newline at end of file
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Stable
+class SliderRecompositionCounter {
+ var innerRecomposition = 0
+ var outerRecomposition = 0
+
+ @Composable
+ fun OuterContent(state: SliderState) {
+ SideEffect { ++outerRecomposition }
+ Column {
+ Text("OuterContent")
+ InnerContent(state)
+ }
+ }
+
+ @Composable
+ private fun InnerContent(state: SliderState) {
+ SideEffect { ++innerRecomposition }
+ Text("InnerContent: ${state.value}")
+ }
+}
diff --git a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Slider.kt b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Slider.kt
index 1547cab..69c0d59 100644
--- a/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Slider.kt
+++ b/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Slider.kt
@@ -16,7 +16,6 @@
package androidx.compose.material3
-import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.TweenSpec
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.MutatePriority
@@ -27,6 +26,7 @@
import androidx.compose.foundation.gestures.DraggableState
import androidx.compose.foundation.gestures.GestureCancellationException
import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.PressGestureScope
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.draggable
@@ -52,7 +52,6 @@
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
import androidx.compose.runtime.Stable
import androidx.compose.runtime.State
import androidx.compose.runtime.getValue
@@ -71,6 +70,7 @@
import androidx.compose.ui.graphics.PointMode
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.input.pointer.AwaitPointerEventScope
import androidx.compose.ui.input.pointer.PointerId
import androidx.compose.ui.input.pointer.PointerInputChange
@@ -143,6 +143,7 @@
* for this slider. You can create and pass in your own `remember`ed instance to observe
* [Interaction]s and customize the appearance / behavior of this slider in different states.
*/
+@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Slider(
value: Float,
@@ -156,17 +157,15 @@
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {
- require(steps >= 0) { "steps should be >= 0" }
-
- SliderImpl(
+ Slider(
+ value = value,
+ onValueChange = onValueChange,
modifier = modifier,
enabled = enabled,
- interactionSource = interactionSource,
- onValueChange = onValueChange,
onValueChangeFinished = onValueChangeFinished,
+ colors = colors,
+ interactionSource = interactionSource,
steps = steps,
- value = value,
- valueRange = valueRange,
thumb = {
SliderDefaults.Thumb(
interactionSource = interactionSource,
@@ -174,13 +173,14 @@
enabled = enabled
)
},
- track = { sliderPositions ->
+ track = { sliderState ->
SliderDefaults.Track(
colors = colors,
enabled = enabled,
- sliderPositions = sliderPositions
+ sliderState = sliderState
)
- }
+ },
+ valueRange = valueRange
)
}
@@ -219,8 +219,6 @@
* @param enabled controls the enabled state of this slider. When `false`, this component will not
* respond to user input, and it will appear visually disabled and disabled to accessibility
* services.
- * @param valueRange range of values that this slider can take. The passed [value] will be coerced
- * to this range.
* @param onValueChangeFinished called when value change has ended. This should not be used to
* update the slider value (use [onValueChange] instead), but rather to know when the user has
* completed selecting a new value by ending a drag or a click.
@@ -229,15 +227,15 @@
* @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s
* for this slider. You can create and pass in your own `remember`ed instance to observe
* [Interaction]s and customize the appearance / behavior of this slider in different states.
- * @param thumb the thumb to be displayed on the slider, it is placed on top of the track. The lambda
- * receives a [SliderPositions] which is used to obtain the current active track and the tick positions
- * if the slider is discrete.
- * @param track the track to be displayed on the slider, it is placed underneath the thumb. The lambda
- * receives a [SliderPositions] which is used to obtain the current active track and the tick positions
- * if the slider is discrete.
* @param steps if 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. Must not be negative.
+ * @param thumb the thumb to be displayed on the slider, it is placed on top of the track. The
+ * lambda receives a [SliderState] which is used to obtain the current active track.
+ * @param track the track to be displayed on the slider, it is placed underneath the thumb. The
+ * lambda receives a [SliderState] which is used to obtain the current active track.
+ * @param valueRange range of values that this slider can take. The passed [value] will be coerced
+ * to this range.
*/
@Composable
@ExperimentalMaterial3Api
@@ -246,37 +244,125 @@
onValueChange: (Float) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
- valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
onValueChangeFinished: (() -> Unit)? = null,
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
- thumb: @Composable (SliderPositions) -> Unit = {
+ /*@IntRange(from = 0)*/
+ steps: Int = 0,
+ thumb: @Composable (SliderState) -> Unit = {
SliderDefaults.Thumb(
interactionSource = interactionSource,
colors = colors,
enabled = enabled
)
},
- track: @Composable (SliderPositions) -> Unit = { sliderPositions ->
+ track: @Composable (SliderState) -> Unit = { sliderState ->
SliderDefaults.Track(
colors = colors,
enabled = enabled,
- sliderPositions = sliderPositions
+ sliderState = sliderState
)
},
- /*@IntRange(from = 0)*/
- steps: Int = 0,
+ valueRange: ClosedFloatingPointRange<Float> = 0f..1f
) {
- require(steps >= 0) { "steps should be >= 0" }
+ val state = remember(
+ steps,
+ valueRange
+ ) {
+ SliderState(
+ value,
+ onValueChange,
+ steps,
+ valueRange,
+ onValueChangeFinished
+ )
+ }
+ state.value = value
+ state.onValueChange = onValueChange
+ state.onValueChangeFinished = onValueChangeFinished
- SliderImpl(
- value = value,
- onValueChange = onValueChange,
+ Slider(
+ state = state,
modifier = modifier,
enabled = enabled,
- valueRange = valueRange,
- steps = steps,
- onValueChangeFinished = onValueChangeFinished,
+ interactionSource = interactionSource,
+ thumb = thumb,
+ track = track
+ )
+}
+
+/**
+ * <a href="https://m3.material.io/components/sliders/overview" class="external" target="_blank">Material Design slider</a>.
+ *
+ * Sliders allow users to make selections from a range of values.
+ *
+ * Sliders reflect a range of values along a bar, from which users may select a single value.
+ * They are ideal for adjusting settings such as volume, brightness, or applying image filters.
+ *
+ * 
+ *
+ * Use continuous sliders to allow users to make meaningful selections that don’t
+ * require a specific value:
+ *
+ * @sample androidx.compose.material3.samples.SliderSample
+ *
+ * You can allow the user to choose only between predefined set of values by specifying the amount
+ * of steps between min and max values:
+ *
+ * @sample androidx.compose.material3.samples.StepsSliderSample
+ *
+ * Slider using a custom thumb:
+ *
+ * @sample androidx.compose.material3.samples.SliderWithCustomThumbSample
+ *
+ * Slider using custom track and thumb:
+ *
+ * @sample androidx.compose.material3.samples.SliderWithCustomTrackAndThumb
+ *
+ * @param state [SliderState] which contains the slider's current value.
+ * @param modifier the [Modifier] to be applied to this slider
+ * @param enabled controls the enabled state of this slider. When `false`, this component will not
+ * respond to user input, and it will appear visually disabled and disabled to accessibility
+ * services.
+ * @param colors [SliderColors] that will be used to resolve the colors used for this slider in
+ * different states. See [SliderDefaults.colors].
+ * @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s
+ * for this slider. You can create and pass in your own `remember`ed instance to observe
+ * [Interaction]s and customize the appearance / behavior of this slider in different states.
+ * @param thumb the thumb to be displayed on the slider, it is placed on top of the track. The
+ * lambda receives a [SliderState] which is used to obtain the current active track.
+ * @param track the track to be displayed on the slider, it is placed underneath the thumb. The
+ * lambda receives a [SliderState] which is used to obtain the current active track.
+ */
+@Composable
+@ExperimentalMaterial3Api
+fun Slider(
+ state: SliderState,
+ modifier: Modifier = Modifier,
+ enabled: Boolean = true,
+ colors: SliderColors = SliderDefaults.colors(),
+ interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+ thumb: @Composable (SliderState) -> Unit = {
+ SliderDefaults.Thumb(
+ interactionSource = interactionSource,
+ colors = colors,
+ enabled = enabled
+ )
+ },
+ track: @Composable (SliderState) -> Unit = { sliderState ->
+ SliderDefaults.Track(
+ colors = colors,
+ enabled = enabled,
+ sliderState = sliderState
+ )
+ }
+) {
+ require(state.steps >= 0) { "steps should be >= 0" }
+
+ SliderImpl(
+ state = state,
+ modifier = modifier,
+ enabled = enabled,
interactionSource = interactionSource,
thumb = thumb,
track = track
@@ -478,93 +564,40 @@
)
}
+@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun SliderImpl(
modifier: Modifier,
+ state: SliderState,
enabled: Boolean,
interactionSource: MutableInteractionSource,
- onValueChange: (Float) -> Unit,
- onValueChangeFinished: (() -> Unit)?,
- steps: Int,
- value: Float,
- valueRange: ClosedFloatingPointRange<Float>,
- thumb: @Composable (SliderPositions) -> Unit,
- track: @Composable (SliderPositions) -> Unit
+ thumb: @Composable (SliderState) -> Unit,
+ track: @Composable (SliderState) -> Unit
) {
- val onValueChangeState = rememberUpdatedState<(Float) -> Unit> {
- if (it != value) {
- onValueChange(it)
- }
- }
-
- val tickFractions = remember(steps) {
- stepsToTickFractions(steps)
- }
-
- val thumbWidth = remember { mutableStateOf(ThumbWidth.value) }
- val totalWidth = remember { mutableStateOf(0) }
-
- fun scaleToUserValue(minPx: Float, maxPx: Float, offset: Float) =
- scale(minPx, maxPx, offset, valueRange.start, valueRange.endInclusive)
-
- fun scaleToOffset(minPx: Float, maxPx: Float, userValue: Float) =
- scale(valueRange.start, valueRange.endInclusive, userValue, minPx, maxPx)
-
- val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
- val rawOffset = remember { mutableStateOf(scaleToOffset(0f, 0f, value)) }
- val pressOffset = remember { mutableStateOf(0f) }
- val coerced = value.coerceIn(valueRange.start, valueRange.endInclusive)
-
- val positionFraction = calcFraction(valueRange.start, valueRange.endInclusive, coerced)
- val sliderPositions = remember {
- SliderPositions(0f..positionFraction, tickFractions)
- }
- sliderPositions.activeRange = 0f..positionFraction
- sliderPositions.tickFractions = tickFractions
-
- val draggableState = remember(valueRange) {
- SliderDraggableState {
- val maxPx = max(totalWidth.value - thumbWidth.value / 2, 0f)
- val minPx = min(thumbWidth.value / 2, maxPx)
- rawOffset.value = (rawOffset.value + it + pressOffset.value)
- pressOffset.value = 0f
- val offsetInTrack = snapValueToTick(rawOffset.value, tickFractions, minPx, maxPx)
- onValueChangeState.value.invoke(scaleToUserValue(minPx, maxPx, offsetInTrack))
- }
- }
-
- val gestureEndAction = rememberUpdatedState {
- if (!draggableState.isDragging) {
- // check isDragging in case the change is still in progress (touch -> drag case)
- onValueChangeFinished?.invoke()
- }
- }
-
+ state.isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
val press = Modifier.sliderTapModifier(
- draggableState,
+ state,
interactionSource,
- totalWidth.value,
- isRtl,
- rawOffset,
- gestureEndAction,
- pressOffset,
enabled
)
-
val drag = Modifier.draggable(
orientation = Orientation.Horizontal,
- reverseDirection = isRtl,
+ reverseDirection = state.isRtl,
enabled = enabled,
interactionSource = interactionSource,
- onDragStopped = { _ -> gestureEndAction.value.invoke() },
- startDragImmediately = draggableState.isDragging,
- state = draggableState
+ onDragStopped = { state.gestureEndAction() },
+ startDragImmediately = state.draggableState.isDragging,
+ state = state.draggableState
)
Layout(
{
- Box(modifier = Modifier.layoutId(SliderComponents.THUMB)) { thumb(sliderPositions) }
- Box(modifier = Modifier.layoutId(SliderComponents.TRACK)) { track(sliderPositions) }
+ Box(modifier = Modifier.layoutId(SliderComponents.THUMB)) {
+ thumb(state)
+ }
+ Box(modifier = Modifier.layoutId(SliderComponents.TRACK)) {
+ track(state)
+ }
},
modifier = modifier
.minimumInteractiveComponentSize()
@@ -573,12 +606,8 @@
minHeight = SliderTokens.HandleHeight
)
.sliderSemantics(
- value,
- enabled,
- onValueChange,
- onValueChangeFinished,
- valueRange,
- steps
+ state,
+ enabled
)
.focusable(enabled, interactionSource)
.then(press)
@@ -600,11 +629,13 @@
val sliderWidth = thumbPlaceable.width + trackPlaceable.width
val sliderHeight = max(trackPlaceable.height, thumbPlaceable.height)
- thumbWidth.value = thumbPlaceable.width.toFloat()
- totalWidth.value = sliderWidth
+ state.updateDimensions(
+ thumbPlaceable.width.toFloat(),
+ sliderWidth
+ )
val trackOffsetX = thumbPlaceable.width / 2
- val thumbOffsetX = ((trackPlaceable.width) * positionFraction).roundToInt()
+ val thumbOffsetX = ((trackPlaceable.width) * state.coercedValueAsFraction).roundToInt()
val trackOffsetY = (sliderHeight - trackPlaceable.height) / 2
val thumbOffsetY = (sliderHeight - thumbPlaceable.height) / 2
@@ -1015,9 +1046,10 @@
val activeTrackColor = colors.trackColor(enabled, active = true)
val inactiveTickColor = colors.tickColor(enabled, active = false)
val activeTickColor = colors.tickColor(enabled, active = true)
- Canvas(modifier
- .fillMaxWidth()
- .height(TrackHeight)
+ Canvas(
+ modifier
+ .fillMaxWidth()
+ .height(TrackHeight)
) {
val isRtl = layoutDirection == LayoutDirection.Rtl
val sliderLeft = Offset(0f, center.y)
@@ -1068,6 +1100,105 @@
}
}
}
+
+ /**
+ * The Default track for [Slider]
+ *
+ * @param sliderState [SliderState] which is used to obtain the current active track.
+ * @param modifier the [Modifier] to be applied to the track.
+ * @param colors [SliderColors] that will be used to resolve the colors used for this track in
+ * different states. See [SliderDefaults.colors].
+ * @param enabled controls the enabled state of this slider. When `false`, this component will
+ * not respond to user input, and it will appear visually disabled and disabled to
+ * accessibility services.
+ */
+ @Composable
+ @ExperimentalMaterial3Api
+ fun Track(
+ sliderState: SliderState,
+ modifier: Modifier = Modifier,
+ colors: SliderColors = colors(),
+ enabled: Boolean = true
+ ) {
+
+ val inactiveTrackColor by colors.trackColor(enabled, active = false)
+ val activeTrackColor by colors.trackColor(enabled, active = true)
+ val inactiveTickColor by colors.tickColor(enabled, active = false)
+ val activeTickColor by colors.tickColor(enabled, active = true)
+ Canvas(
+ modifier
+ .fillMaxWidth()
+ .height(TrackHeight)
+ ) {
+ drawTrack(
+ sliderState.tickFractions,
+ 0f,
+ sliderState.coercedValueAsFraction,
+ inactiveTrackColor,
+ activeTrackColor,
+ inactiveTickColor,
+ activeTickColor
+ )
+ }
+ }
+
+ private fun DrawScope.drawTrack(
+ tickFractions: FloatArray,
+ activeRangeStart: Float,
+ activeRangeEnd: Float,
+ inactiveTrackColor: Color,
+ activeTrackColor: Color,
+ inactiveTickColor: Color,
+ activeTickColor: Color
+ ) {
+ val isRtl = layoutDirection == LayoutDirection.Rtl
+ val sliderLeft = Offset(0f, center.y)
+ val sliderRight = Offset(size.width, center.y)
+ val sliderStart = if (isRtl) sliderRight else sliderLeft
+ val sliderEnd = if (isRtl) sliderLeft else sliderRight
+ val tickSize = TickSize.toPx()
+ val trackStrokeWidth = TrackHeight.toPx()
+ drawLine(
+ inactiveTrackColor,
+ sliderStart,
+ sliderEnd,
+ trackStrokeWidth,
+ StrokeCap.Round
+ )
+ val sliderValueEnd = Offset(
+ sliderStart.x +
+ (sliderEnd.x - sliderStart.x) * activeRangeEnd,
+ center.y
+ )
+
+ val sliderValueStart = Offset(
+ sliderStart.x +
+ (sliderEnd.x - sliderStart.x) * activeRangeStart,
+ center.y
+ )
+
+ drawLine(
+ activeTrackColor,
+ sliderValueStart,
+ sliderValueEnd,
+ trackStrokeWidth,
+ StrokeCap.Round
+ )
+ tickFractions.groupBy {
+ it > activeRangeEnd ||
+ it < activeRangeStart
+ }.forEach { (outsideFraction, list) ->
+ drawPoints(
+ list.map {
+ Offset(lerp(sliderStart, sliderEnd, it).x, center.y)
+ },
+ PointMode.Points,
+ (if (outsideFraction) inactiveTickColor else activeTickColor),
+ tickSize,
+ StrokeCap.Round
+ )
+ }
+ }
}
private fun snapValueToTick(
@@ -1159,37 +1290,72 @@
}.progressSemantics(value, valueRange, steps)
}
+@OptIn(ExperimentalMaterial3Api::class)
+private fun Modifier.sliderSemantics(
+ state: SliderState,
+ enabled: Boolean
+): Modifier {
+ val coerced = state.value.coerceIn(state.valueRange.start, state.valueRange.endInclusive)
+ return semantics {
+ if (!enabled) disabled()
+ setProgress(
+ action = { targetValue ->
+ var newValue = targetValue.coerceIn(
+ state.valueRange.start,
+ state.valueRange.endInclusive
+ )
+ val originalVal = newValue
+ val resolvedValue = if (state.steps > 0) {
+ var distance: Float = newValue
+ for (i in 0..state.steps + 1) {
+ val stepValue = lerp(
+ state.valueRange.start,
+ state.valueRange.endInclusive,
+ i.toFloat() / (state.steps + 1)
+ )
+ if (abs(stepValue - originalVal) <= distance) {
+ distance = abs(stepValue - originalVal)
+ newValue = stepValue
+ }
+ }
+ newValue
+ } else {
+ newValue
+ }
+
+ // This is to keep it consistent with AbsSeekbar.java: return false if no
+ // change from current.
+ if (resolvedValue == coerced) {
+ false
+ } else {
+ state.onValueChange(resolvedValue)
+ state.onValueChangeFinished?.invoke()
+ true
+ }
+ }
+ )
+ }.progressSemantics(state.value, state.valueRange, state.steps)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
private fun Modifier.sliderTapModifier(
- draggableState: DraggableState,
+ state: SliderState,
interactionSource: MutableInteractionSource,
- maxPx: Int,
- isRtl: Boolean,
- rawOffset: State<Float>,
- gestureEndAction: State<() -> Unit>,
- pressOffset: MutableState<Float>,
enabled: Boolean
) = composed(
factory = {
if (enabled) {
val scope = rememberCoroutineScope()
- pointerInput(draggableState, interactionSource, maxPx, isRtl) {
+ pointerInput(state.draggableState, interactionSource, state.totalWidth, state.isRtl) {
detectTapGestures(
- onPress = { pos ->
- val to = if (isRtl) maxPx - pos.x else pos.x
- pressOffset.value = to - rawOffset.value
- try {
- awaitRelease()
- } catch (_: GestureCancellationException) {
- pressOffset.value = 0f
- }
- },
+ onPress = state.press,
onTap = {
scope.launch {
- draggableState.drag(MutatePriority.UserInput) {
+ state.draggableState.drag(MutatePriority.UserInput) {
// just trigger animation, press offset will be applied
dragBy(0f)
}
- gestureEndAction.value.invoke()
+ state.gestureEndAction()
}
}
)
@@ -1200,31 +1366,11 @@
},
inspectorInfo = debugInspectorInfo {
name = "sliderTapModifier"
- properties["draggableState"] = draggableState
+ properties["state"] = state
properties["interactionSource"] = interactionSource
- properties["maxPx"] = maxPx
- properties["isRtl"] = isRtl
- properties["rawOffset"] = rawOffset
- properties["gestureEndAction"] = gestureEndAction
- properties["pressOffset"] = pressOffset
properties["enabled"] = enabled
})
-private suspend fun animateToTarget(
- draggableState: DraggableState,
- current: Float,
- target: Float,
- velocity: Float
-) {
- draggableState.drag {
- var latestValue = current
- Animatable(initialValue = current).animateTo(target, SliderToTickAnimation, velocity) {
- dragBy(this.value - latestValue)
- latestValue = this.value
- }
- }
-}
-
private fun Modifier.rangeSliderPressDragModifier(
startInteractionSource: MutableInteractionSource,
endInteractionSource: MutableInteractionSource,
@@ -1428,7 +1574,7 @@
private val SliderToTickAnimation = TweenSpec<Float>(durationMillis = 100)
-private class SliderDraggableState(
+internal class SliderDraggableState(
val onDelta: (Float) -> Unit
) : DraggableState {
@@ -1505,4 +1651,119 @@
result = 31 * result + tickFractions.contentHashCode()
return result
}
-}
\ No newline at end of file
+}
+
+/**
+ * Class that holds information about [Slider]'s active range.
+ *
+ * @param initialValue [Float] that indicates the initial
+ * position of the thumb. If outside of [valueRange]
+ * provided, value will be coerced to this range.
+ * @param initialOnValueChange callback in which [value] should be updated.
+ * @param steps if greater than 0, specifies the amounts of discrete values, evenly distributed
+ * between across the whole value range. If 0, range slider will behave as a continuous slider and
+ * allow to choose any value from the range specified. Must not be negative.
+ * @param onValueChangeFinished lambda to be invoked when value change has ended. This callback
+ * shouldn't be used to update the range slider values (use [onValueChange] for that),
+ * but rather to know when the user has completed selecting a new value by ending a drag or a click.
+ * @param valueRange range of values that Slider values can take. [value] will be
+ * coerced to this range.
+ */
+@Stable
+@ExperimentalMaterial3Api
+class SliderState(
+ initialValue: Float = 0f,
+ initialOnValueChange: ((Float) -> Unit)? = null,
+ /*@IntRange(from = 0)*/
+ val steps: Int = 0,
+ val valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+ var onValueChangeFinished: (() -> Unit)? = null
+) {
+ private var valueState by mutableStateOf(initialValue)
+
+ /**
+ * [Float] that indicates the current value that the thumb
+ * currently is in respect to the track.
+ */
+ var value: Float
+ set(newVal) {
+ val coercedValue = newVal.coerceIn(valueRange.start, valueRange.endInclusive)
+ val snappedValue = snapValueToTick(
+ coercedValue,
+ tickFractions,
+ valueRange.start,
+ valueRange.endInclusive
+ )
+ valueState = snappedValue
+ }
+ get() = valueState
+
+ /**
+ * callback in which value should be updated
+ */
+ internal var onValueChange: (Float) -> Unit = {
+ if (it != value) {
+ initialOnValueChange?.invoke(it) ?: defaultOnValueChange(it)
+ }
+ }
+
+ internal val tickFractions = stepsToTickFractions(steps)
+
+ private var thumbWidth by mutableStateOf(ThumbWidth.value)
+ internal var totalWidth by mutableStateOf(0)
+
+ internal var rawOffset by mutableStateOf(scaleToOffset(0f, 0f, value))
+ internal var pressOffset by mutableStateOf(0f)
+
+ internal var isRtl = false
+
+ internal val coercedValueAsFraction
+ get() = calcFraction(
+ valueRange.start,
+ valueRange.endInclusive,
+ value.coerceIn(valueRange.start, valueRange.endInclusive)
+ )
+
+ internal val draggableState =
+ SliderDraggableState {
+ val maxPx = max(totalWidth - thumbWidth / 2, 0f)
+ val minPx = min(thumbWidth / 2, maxPx)
+ rawOffset = (rawOffset + it + pressOffset)
+ pressOffset = 0f
+ val offsetInTrack = snapValueToTick(rawOffset, tickFractions, minPx, maxPx)
+ onValueChange(scaleToUserValue(minPx, maxPx, offsetInTrack))
+ }
+
+ internal val gestureEndAction = {
+ if (!draggableState.isDragging) {
+ // check isDragging in case the change is still in progress (touch -> drag case)
+ onValueChangeFinished?.invoke()
+ }
+ }
+
+ internal val press: suspend PressGestureScope.(Offset) -> Unit = { pos ->
+ val to = if (isRtl) totalWidth - pos.x else pos.x
+ pressOffset = to - rawOffset
+ try {
+ awaitRelease()
+ } catch (_: GestureCancellationException) {
+ pressOffset = 0f
+ }
+ }
+
+ internal fun updateDimensions(
+ newThumbWidth: Float,
+ newTotalWidth: Int
+ ) {
+ thumbWidth = newThumbWidth
+ totalWidth = newTotalWidth
+ }
+
+ private fun defaultOnValueChange(newVal: Float) { value = newVal }
+
+ private fun scaleToUserValue(minPx: Float, maxPx: Float, offset: Float) =
+ scale(minPx, maxPx, offset, valueRange.start, valueRange.endInclusive)
+
+ private fun scaleToOffset(minPx: Float, maxPx: Float, userValue: Float) =
+ scale(valueRange.start, valueRange.endInclusive, userValue, minPx, maxPx)
+}
