Review and fix the slider component and add the RangeSlider variant

Reviewed locally with Copilot.

Author: ShreckYe

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt

@@ -274,13 +274,25 @@ fun Material3(/*modifier: Modifier = Modifier*/
         HorizontalDivider()
 
         // Slider
-        var sliderValue by remember { mutableStateOf(0.5f) }
         Column {
-            Text("Slider value: ${(sliderValue * 100).toInt()}%")
+            var sliderPosition by remember { mutableStateOf(0.5f) }
+            Text("Slider position: $sliderPosition")
             Slider(
-                value = sliderValue,
-                onValueChange = { sliderValue = it },
-                valueRange = 0f..1f
+                value = sliderPosition,
+                onValueChange = { sliderPosition = it }
+            )
+            var discreteSliderPosition by remember { mutableStateOf(0.5f) }
+            Text("Discrete slider position: $discreteSliderPosition")
+            Slider(
+                value = discreteSliderPosition,
+                onValueChange = { discreteSliderPosition = it },
+                steps = 3
+            )
+            var rangeSliderPosition by remember { mutableStateOf(0.25f..0.75f) }
+            Text("Range slider position: $rangeSliderPosition")
+            RangeSlider(
+                value = rangeSliderPosition,
+                onValueChange = { rangeSliderPosition = it }
             )
         }
 

material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/Slider.kt

@@ -16,6 +16,17 @@ expect fun Slider(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
-    steps: Int = 0,
+    /*@IntRange(from = 0)*/ steps: Int = 0,
+    onValueChangeFinished: (() -> Unit)? = null
+)
+
+@Composable
+expect fun RangeSlider(
+    value: ClosedFloatingPointRange<Float>,
+    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+    /*@IntRange(from = 0)*/ steps: Int = 0,
     onValueChangeFinished: (() -> Unit)? = null
 )

material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/Text.kt

@@ -6,9 +6,9 @@ import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.graphics.Color
 
 /**
- * The `com.huanshankeji.compose.material.Text` function
+ * The `com.huanshankeji.compose.material3.Text` function
  * can be easily confused with other Composable functions named `Text`
- * such as `androidx.compose.material.Text` and `org.jetbrains.compose.web.dom.Text`
+ * such as `androidx.compose.material3.Text` and `org.jetbrains.compose.web.dom.Text`
  * if not careful.
  * [TaglessText] is recommended over this one when there is no custom [modifier].
  * @see com.huanshankeji.compose.material3.ext.MaterialText

material3/src/composeUiMain/kotlin/com/huanshankeji/compose/material3/Slider.composeUi.kt

@@ -1,5 +1,6 @@
 package com.huanshankeji.compose.material3
 
+import androidx.annotation.IntRange
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.ui.Modifier
 
@@ -10,7 +11,7 @@ actual fun Slider(
     modifier: Modifier,
     enabled: Boolean,
     valueRange: ClosedFloatingPointRange<Float>,
-    steps: Int,
+    @IntRange(from = 0) steps: Int,
     onValueChangeFinished: (() -> Unit)?
 ) =
     androidx.compose.material3.Slider(
@@ -22,3 +23,23 @@ actual fun Slider(
         steps,
         onValueChangeFinished
     )
+
+@Composable
+actual fun RangeSlider(
+    value: ClosedFloatingPointRange<Float>,
+    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
+    modifier: Modifier,
+    enabled: Boolean,
+    valueRange: ClosedFloatingPointRange<Float>,
+    @IntRange(from = 0) steps: Int,
+    onValueChangeFinished: (() -> Unit)?
+) =
+    androidx.compose.material3.RangeSlider(
+        value,
+        onValueChange,
+        modifier.platformModifier,
+        enabled,
+        valueRange,
+        steps,
+        onValueChangeFinished
+    )

material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/Slider.js.kt

@@ -4,11 +4,15 @@ import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.html.material3.MdSlider
 import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.ui.toAttrs
-import com.huanshankeji.compose.web.attributes.ext.disabled
 import com.huanshankeji.compose.web.attributes.ext.onInput
 import com.huanshankeji.compose.web.attributes.isFalseOrNull
-import org.w3c.dom.HTMLElement
-import org.w3c.dom.events.Event
+
+/**
+ * Calculate the step to match the Compose UI behavior.
+ */
+private fun calculateStep(steps: Int, valueRange: ClosedFloatingPointRange<Float>): Float =
+    // We can also use `Double.MIN_VALUE` and change the return type to `Number`, but `Float.MIN_VALUE` should be sufficient here.
+    if (steps > 0) (valueRange.endInclusive - valueRange.start) / (steps + 1) else Float.MIN_VALUE
 
 @Composable
 actual fun Slider(
@@ -17,23 +21,53 @@ actual fun Slider(
     modifier: Modifier,
     enabled: Boolean,
     valueRange: ClosedFloatingPointRange<Float>,
-    steps: Int,
+    /*@IntRange(from = 0)*/ steps: Int,
     onValueChangeFinished: (() -> Unit)?
 ) =
     MdSlider(
-        min = valueRange.start,
-        max = valueRange.endInclusive,
-        value = value,
-        step = if (steps > 0) (valueRange.endInclusive - valueRange.start) / (steps + 1) else null,
+        valueRange.start,
+        valueRange.endInclusive,
+        value,
+        step = calculateStep(steps, valueRange),
+        disabled = enabled.isFalseOrNull(),
         attrs = modifier.toAttrs {
-            disabled(enabled.isFalseOrNull())
             onInput { event ->
                 // MdSlider uses input event for value changes
+                //console.log("Slider input event: ", event)
                 val target = event.target.asDynamic()
-                val newValue = (target.value as? Number)?.toFloat() ?: (target.value as? String)?.toFloatOrNull()
-                newValue?.let { onValueChange(it) }
+                //console.log("`target.value` type: " + jsTypeOf(target.value)) // result: `number`
+                val value = target.value as Float
+                onValueChange(value)
             }
             // Note: onValueChangeFinished is not currently supported in the JS implementation
             // TODO: Add support for onValueChangeFinished using appropriate event listener
         }
     )
+
+@Composable
+actual fun RangeSlider(
+    value: ClosedFloatingPointRange<Float>,
+    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
+    modifier: Modifier,
+    enabled: Boolean,
+    valueRange: ClosedFloatingPointRange<Float>,
+    /*@IntRange(from = 0)*/ steps: Int,
+    onValueChangeFinished: (() -> Unit)?
+) =
+    MdSlider(
+        valueRange.start,
+        valueRange.endInclusive,
+        valueStart = value.start,
+        valueEnd = value.endInclusive,
+        step = calculateStep(steps, valueRange),
+        range = true,
+        disabled = enabled.isFalseOrNull(),
+        attrs = modifier.toAttrs {
+            onInput { event ->
+                val target = event.target.asDynamic()
+                //console.log("Range slider input event: ", event)
+                val newStart = target.valueStart as Float
+                val newEnd = target.valueEnd as Float
+                onValueChange(newStart..newEnd)
+            }
+        })