Rewrote all the docs - more noob friendly now.

Co-authored-by: Copilot <copilot@github.com>

docs/Components/Slider.md

@@ -1,33 +1,23 @@
 # Slider
 
-A styled `<input type="range">` with optional label and description. Supports min/max/step/value and HTMX attributes.
+A draggable range control. Use it when you want the user to pick a numeric value within a range — volume, brightness, price range, font size.
 
 ---
 
-## HTML structure
+## Quick example
 
-```
-div.flex.flex-col.gap-1.5
-  label[for={id}].text-sm.font-medium        ← omitted when label is empty
-    {label}
-  input[type=range, id, name, min, max, step, value, class, $$HxAttrs$$]
-  p.text-sm.text-muted-foreground            ← omitted when description is empty
-    {description}
+```csharp
+new Slider(
+    id:    "volume",
+    name:  "volume",
+    label: "Volume")
 ```
 
----
-
-## CSS mechanics
-
-| Class | Effect |
-|---|---|
-| `w-full h-2 rounded-lg appearance-none cursor-pointer accent-primary` | Full-width, pill-shaped track; thumb follows primary color |
-| `bg-secondary` | Track fill color |
-| `accent-primary` | Thumb and active track color follows `--color-primary` |
+Defaults to a 0–100 range with a starting value of 50.
 
 ---
 
-## Constructor signature
+## All the options
 
 ```csharp
 public Slider(
@@ -43,60 +33,62 @@ public Slider(
     string hxAttrs      = "")
 ```
 
-| Parameter | Description |
+| Parameter | What it does |
 |---|---|
-| `id` | Element id and label `for` target |
-| `name` | Form field name |
-| `min` | Minimum value (default: 0) |
-| `max` | Maximum value (default: 100) |
-| `step` | Increment step (default: 1) |
-| `value` | Initial value (default: 50) |
-| `label` | Optional visible label |
-| `description` | Optional helper text |
-| `extraClasses` | Additional Tailwind classes on the input |
-| `hxAttrs` | Verbatim HTMX / data attributes |
+| `id` | The element id. Also used by `<label for="...">`. |
+| `name` | Form field name. |
+| `min` | Lowest selectable value. |
+| `max` | Highest selectable value. |
+| `step` | How much the value changes per tick. |
+| `value` | Starting position of the thumb. |
+| `label` | Visible text label above the slider. |
+| `description` | Small hint text below the slider. |
+| `extraClasses` | Additional Tailwind classes on the `<input>`. |
+| `hxAttrs` | Extra HTML attributes appended verbatim. |
 
 ---
 
-## Usage examples
+## Real-world examples
 
-### Basic 0–100 slider
+### Brightness setting (stepped)
 
 ```csharp
 new Slider(
-    id:    "volume",
-    name:  "volume",
-    label: "Volume")
+    id:          "brightness",
+    name:        "brightness",
+    min:         10,
+    max:         100,
+    step:        10,
+    value:       70,
+    label:       "Brightness",
+    description: "10 to 100")
 ```
 
-### Fixed range with step
-
-```csharp
-new Slider(
-    id:    "brightness",
-    name:  "brightness",
-    min:   10,
-    max:   100,
-    step:  10,
-    value: 70,
-    label: "Brightness",
-    description: "10–100")
-```
-
-### Live HTMX update
+### Font size with live HTMX update
 
 ```csharp
 new Slider(
     id:      "fontSize",
     name:    "fontSize",
     min:     12,
-    max:     24,
+    max:     32,
     value:   16,
     label:   "Font size",
-    hxAttrs: """hx-post="/settings/font-size" hx-trigger="change" hx-include="[name='fontSize']"""")
+    hxAttrs: """hx-post="/settings/font-size" hx-trigger="change"""")
 ```
 
-### Reading in a form handler
+### Reading the value in a form handler
+
+```csharp
+public record Command([property: FromForm] int Volume);
+// command.Volume == 0..100
+```
+
+---
+
+## How it works
+
+Slider renders a native `<input type="range">`. The thumb and active track colour follow your primary theme colour via `accent-primary`. No JavaScript is needed — the browser handles the drag interaction natively.
 
 ```csharp
 public record Command([property: FromForm] int Volume);