Range Slider & Rating

#Range Slider Component

The <x-ui.range-slider> component provides interactive range selection with single or double sliders. 100% Alpine.js with real-time value display.

#Basic Usage (Single Slider)

<x-ui.range-slider
    :min="0"
    :max="100"
    :step="1"
/>

#With Livewire Binding

{{-- In your Livewire component --}}
public $volume = 50;
 
{{-- In your blade view --}}
<x-ui.range-slider
    wire:model.live="volume"
    :min="0"
    :max="100"
/>

#Double Slider (Range)

{{-- In your Livewire component --}}
public $price = [25, 75];
 
{{-- In your blade view --}}
<x-ui.range-slider
    wire:model.live="price"
    :min="0"
    :max="100"
    :step="5"
    type="double"
/>

#With Custom Labels

<x-ui.range-slider
    :min="-10"
    :max="40"
    :step="0.5"
    :showLabels="true"
    :showValue="true"
/>

#Color Variants

<x-ui.range-slider variant="default" />
<x-ui.range-slider variant="primary" />
<x-ui.range-slider variant="success" />

#Sizes

<x-ui.range-slider size="sm" />
<x-ui.range-slider size="md" />
<x-ui.range-slider size="lg" />

#Props Reference

#Use Cases

• Volume Control: Audio, video playback settings
• Price Range Filter: E-commerce filtering
• Temperature Settings: Climate control interfaces
• Progress Indicators: Interactive progress bars
• Opacity/Transparency: Image/design tools
• Age/Date Ranges: Form filters

#Rating / Star Input Component

The <x-ui.rating> component provides interactive star rating with hover effects. Perfect for reviews and feedback forms.

#Basic Usage

<x-ui.rating />

#With Livewire Binding

{{-- In your Livewire component --}}
public $rating = 0;
 
{{-- In your blade view --}}
<x-ui.rating
    wire:model.live="rating"
    :showValue="true"
/>

#Readonly Display

<x-ui.rating
    :value="4.5"
    :readonly="true"
    :showValue="true"
/>

#Custom Max Stars

<x-ui.rating :max="3" />
<x-ui.rating :max="10" />

#Color Variants

<x-ui.rating variant="default" />  {{-- Yellow stars --}}
<x-ui.rating variant="primary" />  {{-- Primary color --}}
<x-ui.rating variant="red" />      {{-- Red stars --}}

#Sizes

<x-ui.rating size="sm" />
<x-ui.rating size="md" />
<x-ui.rating size="lg" />

#With Value Display

<x-ui.rating
    :value="4"
    :readonly="true"
    :showValue="true"
/>
<span class="text-sm">(1,234 reviews)</span>

#Props Reference

#Use Cases

• Product Reviews: E-commerce ratings
• Service Feedback: Customer satisfaction
• Content Rating: Blog posts, videos
• Skill Assessment: Profile ratings
• Quality Indicators: Performance metrics
• User Preferences: Favorite items