Playground. Add SliderStylization sample

mui-kotlin/src/jsMain/kotlin/mui/base/useOption.types.kt

@@ -2,8 +2,6 @@
 
 package mui.base
 
-import web.dom.Element
-
 external interface SelectOption<Value> {
     var value: Value
 
@@ -21,7 +19,7 @@ external interface UseOptionParameters<Value> {
 
     var label: react.ReactNode
 
-    var rootRef: react.Ref<Element>?
+    var rootRef: react.Ref<web.dom.Element>?
 
     var value: Value
 }
@@ -49,5 +47,5 @@ external interface UseOptionReturnValue {
     /**
      * Ref to the root slot DOM node.
      */
-    var rootRef: react.RefCallback<Element>?
+    var rootRef: react.RefCallback<web.dom.Element>?
 }

mui-kotlin/src/jsMain/kotlin/mui/material/Table.kt

@@ -4,7 +4,6 @@
 
 package mui.material
 
-import web.dom.Element
 import mui.material.styles.Theme
 import mui.system.SxProps
 

mui-kotlin/src/jsMain/kotlin/muix/pickers/PickersActionBar.ext.kt

@@ -2,8 +2,8 @@
 
 package muix.pickers
 
-import seskar.js.JsVirtual
 import seskar.js.JsValue
+import seskar.js.JsVirtual
 
 @JsVirtual
 sealed external interface PickersActionBarAction {

playground/build.gradle.kts

@@ -6,6 +6,7 @@ val kotlinWrappersVersion = property("kotlin-wrappers.version") as String
 
 dependencies {
     jsMainImplementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion"))
+    jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
     jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-react")
     jsMainImplementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
 

playground/src/jsMain/kotlin/App.kt

@@ -20,6 +20,7 @@ private val App = FC {
 
     MyAutocomplete()
     Pickers()
+    SliderStylization()
 }
 
 private fun main() {

playground/src/jsMain/kotlin/SliderStylization.kt

@@ -0,0 +1,75 @@
+import emotion.styled.styled
+import mui.base.Slider
+import mui.base.sliderClasses
+import react.FC
+import react.Props
+import react.dom.events.KeyboardEvent
+import web.cssom.*
+import web.cssom.LineStyle.Companion.solid
+import web.cssom.None.Companion.none
+
+val SliderStylization = FC<Props> {
+    RangeSliderBase {
+        disableSwap = true
+
+        min = 0.0
+        max = 100.0
+
+        value = 50.0
+
+        onKeyDown = KeyboardEvent<*>::preventDefault
+    }
+}
+
+private val RangeSliderBase = Slider.styled {
+    position = Position.absolute
+    top = 0.px
+    width = 100.pct
+    left = (-36 / 2).px
+    height = 100.pct
+
+    display = Display.inlineFlex
+    alignItems = AlignItems.center
+    cursor = Cursor.pointer
+    touchAction = none
+
+    sliderClasses.rail {
+        display = Display.block
+        position = Position.absolute
+        width = 100.pct
+        height = 4.px
+        borderRadius = 6.px
+        backgroundColor = Color.currentcolor
+        opacity = number(0.3)
+    }
+
+    sliderClasses.track {
+        display = none
+    }
+
+    sliderClasses.thumb {
+        display = Display.flex
+        alignItems = AlignItems.center
+        justifyContent = JustifyContent.center
+        position = Position.absolute
+        width = 36.px
+        height = 36.px
+        boxSizing = BoxSizing.borderBox
+        borderRadius = 50.pct
+        outline = Outline(0.px, solid)
+        backgroundColor = Color("#007FFF")
+        transitionProperty = many(PropertyName.boxShadow, PropertyName.transform)
+        transitionTimingFunction = TransitionTimingFunction.ease
+        transitionDuration = 120.ms
+        transformOrigin = "center".unsafeCast<TransformOrigin>()
+    }
+
+    ":hover, :active" {
+        sliderClasses.thumb {
+            width = 24.px
+            height = 24.px
+            margin = ((36 - 24) / 2).px
+            border = Border(2.px, solid, NamedColor.white)
+        }
+    }
+}