Pinion UI — Range Slider

即時顯示數值 (Alpine 驅動)

Volume 40

<x-range-slider name="volume" label="Volume" :value="40" showValue />

<div class="w-full" x-data="{ pct: 40, v: '40' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="volume_6a717cf242363" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Volume</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">40</span>
</div><input type="range" id="volume_6a717cf242363" min="0" max="100" step="1" value="40" style="--range-fill: 40%" x-bind:style="'--range-fill: ' + pct + '%'" name="volume" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary">
</div>

color — 8 colors

Primary 50

Secondary 50

Accent 50

Neutral 50

Info 50

Success 50

Warning 50

Error 50

<x-range-slider color="primary" label="Primary" :value="50" showValue />
<x-range-slider color="secondary" label="Secondary" :value="50" showValue />
<x-range-slider color="accent" label="Accent" :value="50" showValue />
<x-range-slider color="neutral" label="Neutral" :value="50" showValue />
<x-range-slider color="info" label="Info" :value="50" showValue />
<x-range-slider color="success" label="Success" :value="50" showValue />
<x-range-slider color="warning" label="Warning" :value="50" showValue />
<x-range-slider color="error" label="Error" :value="50" showValue />

<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf2467cb" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Primary</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf2467cb" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf246822" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Secondary</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf246822" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-secondary">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf24686b" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Accent</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf24686b" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-accent">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf2468b1" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Neutral</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf2468b1" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-neutral">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf2468f7" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Info</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf2468f7" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-info">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf24693d" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Success</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf24693d" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-success">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf246982" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Warning</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf246982" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-warning">
</div>
<div class="w-full" x-data="{ pct: 50, v: '50' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf2469c5" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Error</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">50</span>
</div><input type="range" id="range_6a717cf2469c5" min="0" max="100" step="1" value="50" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-error">
</div>

size — xs / sm / md (default) / lg / xl

xs 60

sm 60

md (default) 60

lg 60

xl 60

<x-range-slider size="xs" label="xs" :value="60" showValue />
<x-range-slider size="sm" label="sm" :value="60" showValue />
<x-range-slider size="md" label="md (default)" :value="60" showValue />
<x-range-slider size="lg" label="lg" :value="60" showValue />
<x-range-slider size="xl" label="xl" :value="60" showValue />

<div class="w-full" x-data="{ pct: 60, v: '60' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf260f21" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">xs</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">60</span>
</div><input type="range" id="range_6a717cf260f21" min="0" max="100" step="1" value="60" style="--range-fill: 60%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary pn-range-xs">
</div>
<div class="w-full" x-data="{ pct: 60, v: '60' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf260f7b" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">sm</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">60</span>
</div><input type="range" id="range_6a717cf260f7b" min="0" max="100" step="1" value="60" style="--range-fill: 60%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary pn-range-sm">
</div>
<div class="w-full" x-data="{ pct: 60, v: '60' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf260fc3" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">md (default)</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">60</span>
</div><input type="range" id="range_6a717cf260fc3" min="0" max="100" step="1" value="60" style="--range-fill: 60%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary">
</div>
<div class="w-full" x-data="{ pct: 60, v: '60' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf261007" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">lg</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">60</span>
</div><input type="range" id="range_6a717cf261007" min="0" max="100" step="1" value="60" style="--range-fill: 60%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary pn-range-lg">
</div>
<div class="w-full" x-data="{ pct: 60, v: '60' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf26104a" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">xl</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">60</span>
</div><input type="range" id="range_6a717cf26104a" min="0" max="100" step="1" value="60" style="--range-fill: 60%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary pn-range-xl">
</div>

min / max / step

Max price 500

Steps of 50 between 0 and 1000

<x-range-slider name="price-cap" label="Max price" :min="0" :max="1000" :step="50" :value="500" showValue hint="Steps of 50 between 0 and 1000" />

<div class="w-full" x-data="{ pct: 50, v: '500' }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="price-cap_6a717cf271ed6" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Max price</label>
<span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums" x-text="v">500</span>
</div><input type="range" id="price-cap_6a717cf271ed6" min="0" max="1000" step="50" value="500" style="--range-fill: 50%" x-bind:style="'--range-fill: ' + pct + '%'" name="price-cap" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 1000) * 100)); v = $event.target.value" class="pn-range w-full pn-range-primary">
<div class="flex items-baseline justify-between mt-1">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            Steps of 50 between 0 and 1000
        </p>
</div>
</div>

error state — label/hint 切換為 text-error

Risk tolerance

Maximum 80 allowed

<x-range-slider name="risk" label="Risk tolerance" :min="0" :max="100" :value="95" error="Maximum 80 allowed" />

<div class="w-full" x-data="{ pct: 95 }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="risk_6a717cf2769c9" class="block text-[length:var(--text-field-sm)] font-medium text-error">Risk tolerance</label>
</div><input type="range" id="risk_6a717cf2769c9" min="0" max="100" step="1" value="95" style="--range-fill: 95%" x-bind:style="'--range-fill: ' + pct + '%'" name="risk" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100))" class="pn-range w-full pn-range-primary">
<div class="flex items-baseline justify-between mt-1">
<p class="text-[length:var(--text-field-sm)] text-error">
            Maximum 80 allowed
        </p>
</div>
</div>

disabled

Read only

Disabled sliders cannot be dragged

<x-range-slider label="Read only" :value="35" hint="Disabled sliders cannot be dragged" disabled />

<div class="w-full" x-data="{ pct: 35 }">
<div class="flex items-baseline justify-between mb-1.5">
<label for="range_6a717cf27af9e" class="block text-[length:var(--text-field-sm)] font-medium text-base-content">Read only</label>
</div><input type="range" id="range_6a717cf27af9e" min="0" max="100" step="1" value="35" style="--range-fill: 35%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100))" class="pn-range w-full pn-range-primary" disabled>
<div class="flex items-baseline justify-between mt-1">
<p class="text-[length:var(--text-field-sm)] text-base-content/50">
            Disabled sliders cannot be dragged
        </p>
</div>
</div>

no label / no chrome

<x-range-slider :value="70" />

<div class="w-full" x-data="{ pct: 70 }">
<input type="range" id="range_6a717cf27f1f8" min="0" max="100" step="1" value="70" style="--range-fill: 70%" x-bind:style="'--range-fill: ' + pct + '%'" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 0) / 100) * 100))" class="pn-range w-full pn-range-primary">
</div>

Livewire model — wire:* 會轉發到 input

120

<x-range-slider name="zoom" wire:model.live="zoom" :min="50" :max="200" :value="120" showValue />

<div class="w-full" x-data="{ pct: 46.666666666667, v: '120' }">
<input type="range" id="zoom_6a717cf281dca" min="50" max="200" step="1" value="120" style="--range-fill: 46.666666666667%" x-bind:style="'--range-fill: ' + pct + '%'" name="zoom" x-on:input="pct = Math.max(0, Math.min(100, (($event.target.value - 50) / 150) * 100)); v = $event.target.value" wire:model.live="zoom" class="pn-range w-full pn-range-primary">
<div class="flex items-baseline justify-between mt-1">
<p class="text-[length:var(--text-field-sm)] text-base-content/50"></p><span class="text-[length:var(--text-field-xs)] text-base-content/70 tabular-nums shrink-0 ml-2" x-text="v">120</span>
</div>
</div>