Range Slider Component

The Range Slider component provides a styled range input for numerical values.

Usage

Use the range slider for numerical inputs within a defined range:

<x-range-slider 
    label="Mood Meter" 
    :value="20" 
    :min="0" 
    :max="100" 
/>

Livewire Integration

Bind the range slider to Livewire properties using wire:model:

<x-range-slider 
    label="Price Range" 
    wire:model.live="priceLimit"
    :min="0" 
    :max="1000" 
    :step="10"
/>

class ProductFilter extends Component
{
    public int $priceLimit = 500;

    public function render(): View
    {
        $products = Product::where('price', '<=', $this->priceLimit)->get();

        return view('livewire.product-filter', compact('products'));
    }
}

Props Reference

Prop	Type	Default	Description
id	string	Auto-generated	The input ID attribute. Auto-generates unique ID if not provided
name	string|null	null	The input name attribute for form submission
label	string|null	null	Label text displayed above the slider
value	int	50	Initial value of the slider
min	int	0	Minimum value
max	int	100	Maximum value
step	int	1	Increment value when sliding

References

Category	Path / Name	Description
Component	resources/views/components/range-slider.blade.php	Range Slider component file