New Composable: Slider

czan/src/androidMain/kotlin/com/tweener/czan/preview/designsystem/atom/slider/SliderPreview.kt

@@ -0,0 +1,86 @@
+package com.tweener.czan.preview.designsystem.atom.slider
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import com.tweener.czan.designsystem.atom.slider.Slider
+import com.tweener.czan.designsystem.atom.slider.SliderStyle
+import com.tweener.czan.preview.CzanThemePreview
+import com.tweener.czan.preview.UiModePreviews
+
+/**
+ * @author Vivien Mahe
+ * @since 25/10/2024
+ */
+
+// region Preview Primary
+
+@UiModePreviews
+@Composable
+private fun SliderPrimaryCheckedPreview() {
+    var sliderPosition by remember { mutableFloatStateOf(0f) }
+
+    CzanThemePreview {
+        Column {
+            Slider(
+                value = 0f,
+                valueRange = 0f..10f,
+                onValueChange = { sliderPosition = it }
+            )
+
+            Text(text = "Slider value: $sliderPosition")
+        }
+    }
+}
+
+// endregion Preview Primary
+
+// region Preview Secondary
+
+@UiModePreviews
+@Composable
+private fun SliderSecondaryCheckedPreview() {
+    var sliderPosition by remember { mutableFloatStateOf(0f) }
+
+    CzanThemePreview {
+        Column {
+            Slider(
+                style = SliderStyle.SECONDARY,
+                value = 4f,
+                valueRange = 0f..10f,
+                onValueChange = { sliderPosition = it }
+            )
+
+            Text(text = "Slider value: $sliderPosition")
+        }
+    }
+}
+
+// endregion Preview Secondary
+
+// region Preview Tertiary
+
+@UiModePreviews
+@Composable
+private fun SliderTertiaryCheckedPreview() {
+    var sliderPosition by remember { mutableFloatStateOf(0f) }
+
+    CzanThemePreview {
+        Column {
+            Slider(
+                style = SliderStyle.TERTIARY,
+                value = 10f,
+                valueRange = 0f..10f,
+                onValueChange = { sliderPosition = it }
+            )
+
+            Text(text = "Slider value: $sliderPosition")
+        }
+    }
+}
+
+// endregion Preview Tertiary

czan/src/commonMain/kotlin/com/tweener/czan/designsystem/atom/slider/Slider.kt

@@ -0,0 +1,42 @@
+package com.tweener.czan.designsystem.atom.slider
+
+/**
+ * @author Vivien Mahe
+ * @since 25/10/2024
+ */
+
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import io.github.alexzhirkevich.cupertino.adaptive.AdaptiveSlider
+import io.github.alexzhirkevich.cupertino.adaptive.ExperimentalAdaptiveApi
+
+@OptIn(ExperimentalAdaptiveApi::class)
+@Composable
+fun Slider(
+    value: Float,
+    onValueChange: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+    style: SliderStyle = SliderStyle.PRIMARY,
+    enabled: Boolean = true,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+    steps: Int = 0,
+) {
+    AdaptiveSlider(
+        modifier = modifier,
+        value = value,
+        onValueChange = onValueChange,
+        enabled = enabled,
+        valueRange = valueRange,
+        steps = steps,
+        adaptation = {
+            material {
+                colors = SliderDefaults.colors(
+                    thumbColor = style.thumbColor,
+                    activeTrackColor = style.activeTrackColor,
+                    inactiveTrackColor = style.inactiveTrackColor,
+                )
+            }
+        },
+    )
+}

czan/src/commonMain/kotlin/com/tweener/czan/designsystem/atom/slider/SliderStyle.kt

@@ -0,0 +1,40 @@
+package com.tweener.czan.designsystem.atom.slider
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.graphics.Color
+
+/**
+ * @author Vivien Mahe
+ * @since 25/10/2024
+ */
+
+enum class SliderStyle {
+    PRIMARY,
+    SECONDARY,
+    TERTIARY;
+
+    val thumbColor: Color
+        @Composable
+        @ReadOnlyComposable
+        get() = when (this) {
+            PRIMARY -> MaterialTheme.colorScheme.primary
+            SECONDARY -> MaterialTheme.colorScheme.secondary
+            TERTIARY -> MaterialTheme.colorScheme.tertiary
+        }
+
+    val activeTrackColor: Color
+        @Composable
+        @ReadOnlyComposable
+        get() = when (this) {
+            PRIMARY -> MaterialTheme.colorScheme.primary
+            SECONDARY -> MaterialTheme.colorScheme.secondary
+            TERTIARY -> MaterialTheme.colorScheme.tertiary
+        }
+
+    val inactiveTrackColor: Color
+        @Composable
+        @ReadOnlyComposable
+        get() = MaterialTheme.colorScheme.outline
+}