Added Step Property to the Slider component (#800)

* Added step property to the Slider component

* Added test function for the step

* Formatted the code

* Updated factory.py for the step. Test passed.

* Moved step definition to the expansion of props

* Added test for step to the frontend

* Added property documentation for the slider step

* Revered the updates since we don't need to test MUI slider here.

* Updated step property description

Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>

---------

Co-authored-by: Fred Lefévère-Laoide <90181748+FredLL-Avaiga@users.noreply.github.com>
Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>
Co-authored-by: Jean-Robin <jeanrobin.medori@avaiga.com>

frontend/taipy-gui/src/components/Taipy/Slider.tsx

@@ -30,6 +30,7 @@ interface SliderProps extends LovProps<number | string | number[] | string[], nu
     height?: string;
     min?: number;
     max?: number;
+    step?: number;
     textAnchor?: string;
     continuous?: boolean;
     labels?: string | boolean;
@@ -51,6 +52,7 @@ const Slider = (props: SliderProps) => {
         width = "300px",
         updateVars = "",
         valueById,
+        step = 1,
     } = props;
     const [value, setValue] = useState<number|number[]>(0);
     const dispatch = useDispatch();
@@ -282,7 +284,7 @@ const Slider = (props: SliderProps) => {
                         valueLabelDisplay="auto"
                         min={min}
                         max={max}
-                        step={1}
+                        step={step}
                         marks={marks}
                         valueLabelFormat={getLabel}
                         orientation={horizontalOrientation ? undefined : "vertical"}
@@ -299,7 +301,7 @@ const Slider = (props: SliderProps) => {
                         valueLabelDisplay="auto"
                         min={min}
                         max={max}
-                        step={1}
+                        step={step}
                         marks={marks}
                         valueLabelFormat={getLabel}
                         orientation={horizontalOrientation ? undefined : "vertical"}

taipy/gui/_renderers/factory.py

@@ -437,6 +437,7 @@ class _Factory:
                 ("value_by_id", PropertyType.boolean),
                 ("max", PropertyType.number, 100),
                 ("min", PropertyType.number, 0),
+                ("step", PropertyType.number, 1),
                 ("orientation"),
                 ("width", PropertyType.string, "300px"),
                 ("on_change", PropertyType.function),

taipy/gui/viselements.json

@@ -150,6 +150,12 @@
             "default_value": "100",
             "doc": "The maximum value.<br/>This is ignored when <i>lov</i> is defined."
           },
+          {
+            "name": "step",
+            "type": "int|float",
+            "default_value": "1",
+            "doc": "The step value: the gap between two consecutive values the slider set. It is a good practice to have (<i>max</i>-<i>min</i>) being divisible by <i>step</i>.<br/>This property is ignored when <i>lov</i> is defined."
+          },
           {
             "name": "text_anchor",
             "type": "str",

tests/gui/builder/control/test_slider.py

@@ -36,6 +36,20 @@ def test_slider_with_min_max_builder(gui: Gui, test_client, helpers):
     helpers.test_control_builder(gui, page, expected_list)
 
 
+def test_slider_with_step_builder(gui: Gui, test_client, helpers):
+    gui._bind_var_val("x", 0)
+    with tgb.Page(frame=None) as page:
+        tgb.slider(value="{x}", min=-10, max=10, step=2)
+    expected_list = [
+        "<Slider",
+        "min={-10.0}",
+        "max={10.0}",
+        "step={2.0}",
+        "defaultValue={0}",
+    ]
+    helpers.test_control_builder(gui, page, expected_list)
+
+
 def test_slider_with_dict_labels_builder(gui: Gui, helpers):
     sel = "Item 1"  # noqa: F841
     labels = {"Item 1": "Label Start", "Item 3": "Label End"}  # noqa: F841