update slider so width automatically set (#2542)

reflex/components/radix/themes/components/slider.py

@@ -1,6 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, List, Literal, Union
+from typing import Any, Dict, List, Literal, Optional, Union
 
+from reflex.components.component import Component
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -35,7 +36,7 @@ class Slider(RadixThemesComponent):
     radius: Var[LiteralRadius]
 
     # The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
-    default_value: Var[List[Union[float, int]]]
+    default_value: Var[Union[List[Union[float, int]], float, int]]
 
     # The controlled value of the slider. Must be used in conjunction with onValueChange.
     value: Var[List[Union[float, int]]]
@@ -72,3 +73,37 @@ class Slider(RadixThemesComponent):
             EventTriggers.ON_CHANGE: lambda e0: [e0],
             EventTriggers.ON_VALUE_COMMIT: lambda e0: [e0],
         }
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        width: Optional[str] = "100%",
+        **props,
+    ) -> Component:
+        """Create a Slider component.
+
+        Args:
+            *children: The children of the component.
+            width: The width of the slider.
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        default_value = props.pop("default_value", [50])
+
+        if isinstance(default_value, Var):
+            if issubclass(default_value._var_type, (int, float)):
+                default_value = [default_value]
+
+        elif isinstance(default_value, (int, float)):
+            default_value = [default_value]
+
+        style = props.setdefault("style", {})
+        style.update(
+            {
+                "width": width,
+            }
+        )
+        return super().create(*children, default_value=default_value, **props)

reflex/components/radix/themes/components/slider.pyi

@@ -7,7 +7,8 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any, Dict, List, Literal, Union
+from typing import Any, Dict, List, Literal, Optional, Union
+from reflex.components.component import Component
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
@@ -19,7 +20,17 @@ class Slider(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        width: Optional[str] = "100%",
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -82,16 +93,6 @@ class Slider(RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "surface", "soft"]],
-                Literal["classic", "surface", "soft"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -100,7 +101,10 @@ class Slider(RadixThemesComponent):
             ]
         ] = None,
         default_value: Optional[
-            Union[Var[List[Union[float, int]]], List[Union[float, int]]]
+            Union[
+                Var[Union[List[Union[float, int]], float, int]],
+                Union[List[Union[float, int]], float, int],
+            ]
         ] = None,
         value: Optional[
             Union[Var[List[Union[float, int]]], List[Union[float, int]]]
@@ -176,18 +180,15 @@ class Slider(RadixThemesComponent):
         ] = None,
         **props
     ) -> "Slider":
-        """Create a new component instance.
+        """Create a Slider component.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
 
         Args:
-            *children: Child components.
+            *children: The children of the component.
-            color: map to CSS default color property.
+            width: The width of the slider.
-            color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "3"
             variant: Variant of button
+            color_scheme: Override theme color for button
             high_contrast: Whether to render the button with higher contrast color against background
             radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
             default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
@@ -205,9 +206,9 @@ class Slider(RadixThemesComponent):
             autofocus: Whether the component should take the focus once the page is loaded
             _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: Component properties.
+            **props: The properties of the component.
 
         Returns:
-            A new component instance.
+            The component.
         """
         ...