Update example, add picture

Author: robabram

README.md

@@ -1,11 +1,13 @@
 ![Tests Completion Status](https://github.com/robabram/textual-thin-slider/actions/workflows/tests.yaml/badge.svg)
 ![Coverage Status](https://raw.githubusercontent.com/robabram/textual-thin-slider/refs/heads/coverage-badge/coverage.svg?raw=true)
-![Supported Python Versions](https://img.shields.io/badge/python-v3.8%20|%20v3.9%20|%20v3.10%20|%20v3.11%20|%20v3.12%20|%20v3.13%20|%20v3.14-blue)
+![Supported Python Versions](https://img.shields.io/badge/Python-v3.8%20|%20v3.9%20|%20v3.10%20|%20v3.11%20|%20v3.12%20|%20v3.13%20|%20v3.14-blue)
 ![is support](https://img.shields.io/badge/OS-Linux%20|%20MacOS%20|%20Windows-red)
 ![AI Code Pct](https://img.shields.io/badge/AI-0%25-purple)
 
 # Textual Thin Slider
-A thin slider widgit for the Textual UI platform. The this slider widgit is only 1 character tall and allows 
-fine control to choose a value within a range.
+A thin slider widget for the Textual UI platform. The thin slider widget is only 1 character tall and allows 
+fine control to choose a value within a range.  Options include, no value display, percentage or value. Value may displayed
+on left or right of slider bar.
 
 
+![Slider w/Percent](https://raw.githubusercontent.com/robabram/textual-thin-slider/refs/heads/main/examples/images/slider-percent.png?raw=true)

examples/images/slider-percent.png

@@ -3,16 +3,24 @@
 # file 'LICENSE', which is part of this source code package.
 #
 from textual.app import ComposeResult, App
+from textual.containers import Grid
 from textual.widgets import Header, Footer
 
 from src.textual_thin_slider.thinslider import ThinSlider, ThinSliderDisplayOptions
 
 
-class SimpleSliderApp(App):
+class SimpleSliderGrid(Grid):
+
+    DEFAULT_CSS = """
+        SimpleSliderGrid {
+            width: 70;
+            height: 15;
+            padding: 2 4;
+            hatch: cross #aaaaaa 20%;
+        }
+        """
 
     def compose(self) -> ComposeResult:
-        yield Header()
-        yield Footer()
         # Show a slider only with no value display
         yield ThinSlider(range_min=0, range_max=1500, value=600, display_type=ThinSliderDisplayOptions.none)
         # Show a slider with a percentage shown on the left side
@@ -27,6 +35,16 @@ def compose(self) -> ComposeResult:
                          display_type=ThinSliderDisplayOptions.display_right | ThinSliderDisplayOptions.show_value)
 
 
+class SimpleSliderApp(App):
+
+    TITLE = "Slider Example"
+
+    def compose(self) -> ComposeResult:
+        yield Header()
+        yield Footer()
+        yield SimpleSliderGrid()
+
+
 if __name__ == "__main__":
     app = SimpleSliderApp()
     app.run()