Add slider docs example tests.

sdk/python/examples/controls/slider/basic.py

@@ -10,4 +10,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/slider/custom_label.py

@@ -10,4 +10,5 @@ def main(page: ft.Page):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/slider/handling_events.py

@@ -9,6 +9,7 @@ def slider_changed(e: ft.Event[ft.Slider]):
     page.add(
         ft.Text("Slider with 'on_change' event:"),
         ft.Slider(
+            key="slider",
             min=0,
             max=100,
             divisions=10,
@@ -19,4 +20,5 @@ def slider_changed(e: ft.Event[ft.Slider]):
     )
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/examples/controls/slider/random_values.py

@@ -23,4 +23,5 @@ def handle_slider_change(e: ft.Event[ft.Slider]):
         slider.update()
 
 
-ft.run(main)
+if __name__ == "__main__":
+    ft.run(main)

sdk/python/packages/flet/docs/controls/slider.md

@@ -1,22 +1,22 @@
 ---
 class_name: flet.Slider
 examples: ../../examples/controls/slider
-example_images: ../examples/controls/slider/media
+example_images: ../test-images/examples/material/golden/macos/slider
 ---
 
-{{ class_summary(class_name) }}
+{{ class_summary(class_name, example_images + "/image_for_docs.png", image_caption="Default and disabled sliders") }}
 
 ## Examples
 
-[Live example](https://flet-controls-gallery.fly.dev/input/slider)
+[Live example](https://flet-controls-gallery.fly.dev/input/slider/basic)
 
 ### Basic Example
 
 ```python
 --8<-- "{{ examples }}/basic.py"
 ```
 
-{{ image(example_images + "/basic.gif", alt="basic", width="80%") }}
+{{ image(example_images + "/basic.png", alt="basic", width="80%") }}
 
 
 ### Setting a custom label
@@ -25,7 +25,7 @@ example_images: ../examples/controls/slider/media
 --8<-- "{{ examples }}/custom_label"
 ```
 
-{{ image(example_images + "/custom_label.gif", alt="custom-label", width="80%") }}
+{{ image(example_images + "/custom_label.png", alt="custom-label", width="80%") }}
 
 
 ### Handling events
@@ -34,13 +34,8 @@ example_images: ../examples/controls/slider/media
 --8<-- "{{ examples }}/handling_events.py"
 ```
 
-{{ image(example_images + "/handling_events.gif", alt="handling-events", width="80%") }}
+{{ image(example_images + "/handling_events.png", alt="handling-events", width="80%") }}
 
 
-### Random values
-
-```python
---8<-- "{{ examples }}/random_values.py"
-```
 
 {{ class_members(class_name) }}

sdk/python/packages/flet/docs/extras/css/mkdocstrings.css

@@ -86,3 +86,5 @@ code.doc-symbol-command::after {
 }
 
 /* Command symbol */
+
+

sdk/python/packages/flet/integration_tests/examples/material/test_slider.py

@@ -0,0 +1,68 @@
+import pytest
+
+import flet as ft
+import flet.testing as ftt
+from examples.controls.slider import (
+    custom_label,
+    basic,
+    handling_events,
+    random_values,
+)
+
+
+@pytest.mark.asyncio(loop_scope="function")
+async def test_image_for_docs(flet_app_function: ftt.FletTestApp, request):
+    flet_app_function.page.theme_mode = ft.ThemeMode.LIGHT
+    await flet_app_function.assert_control_screenshot(
+        request.node.name,
+        ft.Column(
+            [
+                ft.Slider(label="Defualt Slider"),
+                ft.Slider(label="Disabled Slider", disabled=True),
+            ]
+        ),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": basic.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_basic(flet_app_function: ftt.FletTestApp):
+    flet_app_function.assert_screenshot(
+        "basic",
+        await flet_app_function.take_page_controls_screenshot(),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": custom_label.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_custom_label(flet_app_function: ftt.FletTestApp):
+    flet_app_function.assert_screenshot(
+        "custom_label",
+        await flet_app_function.take_page_controls_screenshot(),
+    )
+
+
+@pytest.mark.parametrize(
+    "flet_app_function",
+    [{"flet_app_main": handling_events.main}],
+    indirect=True,
+)
+@pytest.mark.asyncio(loop_scope="function")
+async def test_handling_events(flet_app_function: ftt.FletTestApp):
+    scr = await flet_app_function.wrap_page_controls_in_screenshot()
+    button = await flet_app_function.tester.find_by_key("slider")
+    await flet_app_function.tester.tap(button)
+
+    await flet_app_function.tester.pump_and_settle()
+    flet_app_function.assert_screenshot(
+        "handling_events",
+        await scr.capture(pixel_ratio=flet_app_function.screenshots_pixel_ratio),
+    )