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/views/showcase/index.blade.php

@@ -20,5 +20,6 @@
         @include('livewire-material::showcase.sections.carousel')
         @include('livewire-material::showcase.sections.fields')
         @include('livewire-material::showcase.sections.chips')
+        @include('livewire-material::showcase.sections.sliders')
     </main>
 @endsection

resources/views/showcase/layout.blade.php

@@ -18,7 +18,7 @@
                 <a href="{{ route('livewire-material.showcase') }}" class="shrink-0 type-title-lg max-sm:hidden">Livewire Material</a>
 
                 <nav class="-my-2 flex min-w-0 flex-1 gap-x-4 overflow-x-auto py-2 whitespace-nowrap type-label-lg text-on-surface-variant [scrollbar-width:none]" aria-label="Sections">
-                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips'] as $anchor => $section)
+                    @foreach (['colour' => 'Colour', 'type' => 'Type', 'shape' => 'Shape', 'elevation' => 'Elevation', 'motion' => 'Motion', 'icons' => 'Icons', 'buttons' => 'Buttons', 'menus' => 'Menus', 'communication' => 'Communication', 'progress' => 'Progress', 'containment' => 'Containment', 'carousel' => 'Carousel', 'fields' => 'Fields', 'chips' => 'Chips', 'sliders' => 'Sliders'] as $anchor => $section)
                         <a href="#{{ $anchor }}" class="rounded-corner-xs hover:text-on-surface focus-ring">{{ $section }}</a>
                     @endforeach
                 </nav>

resources/views/showcase/sections/sliders.blade.php

@@ -0,0 +1,57 @@
+@php
+    $examples = [
+        'Standard, discrete and disabled' => <<<'BLADE'
+            <div class="grid w-full gap-8 md:grid-cols-3">
+                <x-slider label="Volume" value="40" hint="Drag the handle or use the arrow keys" />
+                <x-slider label="Quality" value="6" :max="10" ticks />
+                <x-slider label="Locked" value="70" disabled />
+            </div>
+            BLADE,
+        'Sizes, with an inset icon from md' => <<<'BLADE'
+            <div class="grid w-full gap-6">
+                <x-slider label="Extra small (16px track)" value="30" />
+                <x-slider label="Small (24px)" value="45" size="sm" />
+                <x-slider label="Medium (40px)" value="60" size="md" icon="volume_up" />
+                <x-slider label="Large (56px)" value="12" size="lg" icon="light_mode" />
+                <x-slider label="Extra large (96px)" value="75" size="xl" icon="brightness_medium" />
+            </div>
+            BLADE,
+        'Range and centred' => <<<'BLADE'
+            <div class="grid w-full gap-8 md:grid-cols-2">
+                <x-slider label="Price" :value="[20, 60]" range ticks :step="10" hint="Handles never cross" />
+                <x-slider label="Balance" value="15" :min="-50" :max="50" centered />
+            </div>
+            BLADE,
+        'Colours and value labels' => <<<'BLADE'
+            <div class="grid w-full gap-8 md:grid-cols-3">
+                <x-slider label="Always labelled" value="55" color="secondary" value-label="always" size="sm" />
+                <x-slider label="Tertiary, no label" value="35" color="tertiary" value-label="never" size="sm" />
+                <x-slider label="Error" :value="[30, 70]" color="error" range size="sm" />
+            </div>
+            BLADE,
+        'Bound with x-model' => <<<'BLADE'
+            <div x-data="{ volume: 25, price: [100, 300] }" class="grid w-full gap-8 md:grid-cols-2">
+                <div class="space-y-2">
+                    <x-slider label="Bound volume" x-model="volume" />
+                    <p class="type-body-md text-on-surface-variant">volume: <span data-bound="volume" x-text="volume"></span> <x-button label="Set 80" x-on:click="volume = 80" /></p>
+                </div>
+                <div class="space-y-2">
+                    <x-slider label="Bound price" x-model="price" range :max="500" :step="25" ticks />
+                    <p class="type-body-md text-on-surface-variant">price: <span data-bound="price" x-text="JSON.stringify(price)"></span></p>
+                </div>
+            </div>
+            BLADE,
+    ];
+@endphp
+
+<section id="sliders" class="scroll-mt-24 space-y-6">
+    <h2 class="type-headline-md">Sliders</h2>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        <code>&lt;x-slider&gt;</code>: M3 Expressive's slider on native range inputs — standard, range and centred, five sizes, ticks, value labels and an inset icon.
+    </p>
+
+    @foreach ($examples as $title => $code)
+        <x-showcase::example :$title :$code :stack="true" />
+    @endforeach
+</section>