Add slider docs example tests. (#5704)

* update slider docs and add integration test

* add __init__.py and fix references

* add nav list left margin to docs css [skip ci]

* remove unused example .gifs

* remove nav list indentation

Author: OwenMcDonnell

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

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

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

@@ -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/handling_events.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/examples/controls/slider/media/basic.gif

@@ -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) }}