Range Slider
daisyUI 5 的 range 類別包裝，<input type="range"> + 標籤 / 值顯示 / 提示 / 錯誤的修飾。8 色 × 5 尺寸、min/max/step、showValue (Alpine 即時顯示)、error 狀態。可作表單輸入或純視覺滑桿。
default color=primary, size=md, min=0, max=100 — label + showValue で値をライブ表示
40
color variants — 8 colors
50
50
50
50
50
50
50
50
size variants — xs / sm / md (default) / lg / xl
60
60
60
60
60
min / max / step — 0-1000、step=50 で価格上限スライダ
500
50円刻みで上限を設定
error state — label/hint が text-error に切替
Maximum 80 まで設定可能です
disabled — 操作不能
この設定は管理者のみ変更可能
no label / no chrome — 純粋なスライダー
使い方
{{-- 最小 — name + label --}}
<x-range-slider name="volume" label="Volume" />
{{-- 値をライブ表示 (Alpine 駆動) --}}
<x-range-slider name="volume" label="Volume" :value="40" showValue />
{{-- min / max / step --}}
<x-range-slider name="price" label="Max" :min="0" :max="1000" :step="50" :value="500" showValue />
{{-- color: primary (default) / secondary / accent / neutral / info / success / warning / error --}}
<x-range-slider color="success" label="Quality" :value="80" showValue />
{{-- size: xs / sm / md (default) / lg / xl --}}
<x-range-slider size="lg" label="Large" :value="60" />
{{-- error state — label/hint が text-error に --}}
<x-range-slider label="Risk" :value="95" error="Maximum 80 まで" />
{{-- Livewire model — wire:* は input に forwarding --}}
<x-range-slider name="zoom" wire:model.live="zoom" :min="50" :max="200" :value="$zoom" showValue />