🚀 Add Tooltip to Slider

* Added Tooltip to Slider when dragging

app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SliderWithTitle.kt

@@ -1,5 +1,6 @@
 package ua.acclorite.book_story.presentation.screens.settings.components
 
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -7,16 +8,22 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Label
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import ua.acclorite.book_story.presentation.core.components.CategoryTitle
 import kotlin.math.roundToInt
 
 /**
@@ -33,6 +40,7 @@ import kotlin.math.roundToInt
  * @param verticalPadding Vertical item padding.
  * @param onValueChange Callback when value changes.
  */
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SliderWithTitle(
     modifier: Modifier = Modifier,
@@ -46,6 +54,14 @@ fun SliderWithTitle(
     verticalPadding: Dp = 8.dp,
     onValueChange: (Int) -> Unit
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val placeholder = remember(showPlaceholder, value, valuePlaceholder) {
+        derivedStateOf {
+            if (!showPlaceholder) "${value.first}${value.second}"
+            else valuePlaceholder
+        }
+    }
+
     Row(
         modifier
             .fillMaxWidth()
@@ -56,8 +72,7 @@ fun SliderWithTitle(
             CategoryTitle(title = title, padding = 0.dp)
             Spacer(modifier = Modifier.height(4.dp))
             Text(
-                text = if (!showPlaceholder) "${value.first}${value.second}"
+                text = placeholder.value,
-                else valuePlaceholder,
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
@@ -69,6 +84,29 @@ fun SliderWithTitle(
             onValueChange = {
                 onValueChange(it.roundToInt())
             },
+            interactionSource = interactionSource,
+            thumb = {
+                Label(
+                    label = {
+                        PlainTooltip(
+                            modifier = Modifier.clip(CircleShape)
+                        ) {
+                            Text(
+                                text = placeholder.value,
+                                modifier = Modifier.padding(
+                                    vertical = 6.dp,
+                                    horizontal = 4.dp
+                                )
+                            )
+                        }
+                    },
+                    interactionSource = interactionSource
+                ) {
+                    SliderDefaults.Thumb(
+                        interactionSource = interactionSource
+                    )
+                }
+            },
             steps = toValue - fromValue - 1,
             colors = SliderDefaults.colors(
                 activeTickColor = MaterialTheme.colorScheme.onPrimary,
@@ -91,6 +129,7 @@ fun SliderWithTitle(
  * @param verticalPadding Vertical item padding.
  * @param onValueChange Callback when value changes.
  */
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SliderWithTitle(
     modifier: Modifier = Modifier,
@@ -103,6 +142,14 @@ fun SliderWithTitle(
     verticalPadding: Dp = 8.dp,
     onValueChange: (Float) -> Unit
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val placeholder = remember(showPlaceholder, value, toValue, valuePlaceholder) {
+        derivedStateOf {
+            if (!showPlaceholder) "${(value.first * toValue).roundToInt()}${value.second}"
+            else valuePlaceholder
+        }
+    }
+
     Row(
         modifier
             .fillMaxWidth()
@@ -113,8 +160,7 @@ fun SliderWithTitle(
             CategoryTitle(title = title, padding = 0.dp)
             Spacer(modifier = Modifier.height(4.dp))
             Text(
-                text = if (!showPlaceholder) "${(value.first * toValue).roundToInt()}${value.second}"
+                text = placeholder.value,
-                else valuePlaceholder,
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
@@ -126,6 +172,29 @@ fun SliderWithTitle(
             onValueChange = {
                 onValueChange(it)
             },
+            interactionSource = interactionSource,
+            thumb = {
+                Label(
+                    label = {
+                        PlainTooltip(
+                            modifier = Modifier.clip(CircleShape)
+                        ) {
+                            Text(
+                                text = placeholder.value,
+                                modifier = Modifier.padding(
+                                    vertical = 6.dp,
+                                    horizontal = 4.dp
+                                )
+                            )
+                        }
+                    },
+                    interactionSource = interactionSource
+                ) {
+                    SliderDefaults.Thumb(
+                        interactionSource = interactionSource
+                    )
+                }
+            },
             colors = SliderDefaults.colors(
                 activeTickColor = MaterialTheme.colorScheme.onPrimary,
                 inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant