docs: add gif examples to the Slider docs

Author: levinzonr

demo/src/main/java/io/monstarlab/mosaic/features/Test.kt

@@ -0,0 +1,84 @@
+package io.monstarlab.mosaic.features
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.monstarlab.mosaic.slider.SliderColors
+import io.monstarlab.mosaic.slider.distribution.SliderValuesDistribution
+import io.monstarlab.mosaic.ui.theme.MosaicTheme
+import kotlin.math.roundToInt
+import androidx.compose.material3.Slider as MaterialSlider
+import io.monstarlab.mosaic.slider.Slider as MosaicSlider
+
+@Composable
+@Preview()
+fun Test() {
+    MosaicTheme {
+
+        Surface {
+            var value by remember { mutableStateOf(50f) }
+            val range = 0f..100f
+
+            Column(Modifier.padding(16.dp)) {
+
+                Text(
+                    "Sliders with different distributions\nValue: ${value.roundToInt()}",
+                    color = MaterialTheme.colorScheme.onSurface,
+                )
+                Spacer(modifier = Modifier.padding(8.dp))
+
+                Text(
+                    "Linear distribution",
+                    color = MaterialTheme.colorScheme.onSurface,
+                    fontSize = 12.sp
+                )
+                MosaicSlider(
+                    value = value,
+                    onValueChange = { value = it },
+                    colors = SliderColors(
+                        MaterialTheme.colorScheme.primary,
+                        MaterialTheme.colorScheme.error
+                    ),
+                    range = range,
+                )
+
+                Text(
+                    "Non-linear distribution",
+                    color = MaterialTheme.colorScheme.onSurface,
+                    fontSize = 12.sp
+                )
+
+                MosaicSlider(
+                    value = value,
+                    onValueChange = { value = it },
+                    colors = SliderColors(
+                        MaterialTheme.colorScheme.primary,
+                        MaterialTheme.colorScheme.error
+                    ),
+                    range = range,
+                    valueDistribution = remember {
+                        SliderValuesDistribution.checkpoints(
+                            0f to 0f,
+                            0.5f to 20f,
+                            1f to 100f
+                        )
+                    }
+                )
+            }
+        }
+
+    }
+}

demo/src/main/java/io/monstarlab/mosaic/ui/theme/Theme.kt

@@ -39,18 +39,9 @@ fun MosaicTheme(
     dynamicColor: Boolean = true,
     content: @Composable () -> Unit,
 ) {
-    val colorScheme = when {
-        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
-            val context = LocalContext.current
-            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
-        }
-
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
-    }
 
     MaterialTheme(
-        colorScheme = colorScheme,
+        colorScheme = DarkColorScheme,
         typography = Typography,
         content = content,
     )

docs/assets/example_disabled_range.gif

@@ -98,6 +98,7 @@ Following example has a custom thumb that displays current value and animates it
 Sometimes you want to limit slider range to some extent while still showing the full range. This can be done using `disabledRange` 
 By specifying disabled range you limit where user can drag the thumb, thus making sure the values from the `disabledRange` wont be selected
 
+![Disabled range](assets/example_disabled_range.gif)
 
 You can specifiy the `disabledRange` in two ways, depending on how you manage the slider state 
 
@@ -139,6 +140,8 @@ Most of the Sliders have Linear values distribution, meaning that the values are
 
 This allows you to control how the user interacts with the slider, the specific values that can be selected and how sensetive the slider is to the changes on some segments so that the users selection is more precise.
 
+![Distributions](./assets/example_distribution.gif)
+
 ### Linear Values Distribution
 By default, Mosaic Slider will use `SliderValuesDistribution.Linear` which would arrange values in a linear fashion just like any other Slider