Andreas Reinhold / reiniandClaude Fable 5.1
790ef93c6a
M3 Expressive's configuration table lists a vertical orientation the library had no prop for (plan step 24, audit docs/audits/m3-alignment/inputs.md § Missing). The drawing is the horizontal one, laid out as long as the slider is tall inside a size container and turned a quarter anticlockwise, so the geometry, the sizes and the tokens are untouched; the value label and the inset icon are turned back so they read across. The keyboard stays the native range's — Up and Right raise, Down and Left lower — and the inputs say aria-orientation. A vertical slider takes its length from its wrapper, so the header, the SKILL.md entry and the showcase all say to give it a height. M3 keeps range sliders horizontal, so `range` wins over `orientation`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
68 lines
3.9 KiB
PHP
68 lines
3.9 KiB
PHP
@php
|
|
$examples = [
|
|
'Standard, discrete and disabled' => <<<'BLADE'
|
|
<div class="grid w-full gap-8 expanded: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 medium: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,
|
|
'Vertical' => <<<'BLADE'
|
|
{{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
|
|
<div class="flex flex-wrap items-end gap-10">
|
|
<x-slider label="Volume" orientation="vertical" value="40" class="h-64" hint="Up and Down" />
|
|
<x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks class="h-64" />
|
|
<x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" class="h-64" />
|
|
<x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" class="h-64" />
|
|
<x-slider label="Locked" orientation="vertical" value="25" disabled class="h-64" />
|
|
</div>
|
|
BLADE,
|
|
'Colours and value labels' => <<<'BLADE'
|
|
<div class="grid w-full gap-8 expanded: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 medium: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><x-slider></code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code :stack="true" />
|
|
@endforeach
|
|
</section>
|