Andreas Reinhold / reiniandClaude Opus 5
bf00e4c40a
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m5s
tests / feature (8.5) (push) Successful in 1m5s
tests / browser (chrome, chromium) (push) Successful in 3m17s
tests / browser (firefox, firefox) (push) Successful in 4m1s
tests / browser (safari, webkit) (push) Failing after 5m38s
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
58 lines
3.0 KiB
PHP
58 lines
3.0 KiB
PHP
@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><x-slider></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>
|