Add the M3 Expressive slider

Standard, centered and range sliders on native range inputs, drawn as
Compose draws them, in five sizes with ticks, value labels and inset
icons. Completes Phase 6.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy

resources/boost/skills/livewire-material-development/SKILL.md

@@ -436,6 +436,33 @@ M3 selection controls on native inputs; the whole row is the label.
 <x-toggle label="Notify me on download" wire:model.live="notify" right />
 ```
 
+### `<x-slider>`
+
+M3 Expressive's slider on native `<input type="range">`s (one per handle), so the arrow keys, Home, End, forms and screen readers work as on a plain range; PageUp and PageDown move a tenth of the steps (1 to 10). A press anywhere on the slider moves the nearest handle there. Without JavaScript the native range shows, and posts.
+
+```blade
+<x-slider label="Volume" wire:model.live="volume" hint="Applies at once" />
+<x-slider label="Price" wire:model="price" range :max="500" :step="10" ticks />
+<x-slider label="Balance" x-model="balance" name="balance" :min="-50" :max="50" centered />
+<x-slider label="Brightness" name="brightness" value="60" size="lg" icon="light_mode" />
+```
+
+| Prop | Default | |
+|---|---|---|
+| `label`, `hint` | | the label above names the input (with `range`, the group); a validation error for the bound property or `name` replaces the hint |
+| `value`, `min`, `max`, `step` | `null`, `0`, `100`, `1` | as on a range input; `step="any"` is continuous. With `wire:model` the property's value is drawn |
+| `name` | the `wire:model` property | with `range` it posts `name[]` twice, from first |
+| `range` | `false` | two handles that never cross; binds an array `[from, to]` (`wire:model="price"` binds `price.0` and `price.1`, `x-model="price"` binds `price[0]` and `price[1]`) |
+| `centered` | `false` | fills from the middle of the track, for values that go below zero |
+| `size` | `xs` | track `xs` 16px, `sm` 24px, `md` 40px, `lg` 56px, `xl` 96px |
+| `icon` | `null` | a Material Symbol inside the track, `md` and up, standard sliders only |
+| `ticks` | `false` | a mark per step (up to 200, hidden while closer than 8px); the handle sits on the marks |
+| `value-label` | `drag` | `drag` (while pressed, dragged or keyboard-focused), `always`, `never` |
+| `color` | `primary` | `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info` |
+| `disabled` | `false` | |
+
+Other attributes go to the input(s). A `wire:model.live` slider sends while it is dragged, and a server render never moves a handle under the pointer (the drawing is `wire:ignore`); a value the server sets moves the handle after the morph. The binding gets `.number`, so values arrive as numbers. Its width is the container's unless a `w-*` class is passed.
+
 ### `<x-choices>`
 
 Choosing from a list, with typed values (an array of integers stays integers). `options` (`id`, `name`, `disabled`; `option-value`, `option-label`), `label`, `hint`, `single`. Errors for the property and its items replace the hint.