Livewire Range Slider Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require sadam/livewire-range-slider
   npm install nouislider --save-dev
   npm run dev
   

2. Publish assets (if needed):

   npx livewire-discover
   

3. First usage:

   use Sadam\LivewireRangeSlider\LivewireRangeSlider;
   
   // In your Livewire component
   public $rangeValue = [20, 80];
   
   public function render()
   {
       return view('livewire.your-component')->with([
           'slider' => LivewireRangeSlider::make('rangeValue')
               ->min(0)
               ->max(100)
               ->step(1),
       ]);
   }
   

4. Blade template:

   <livewire:your-component />
   

First Use Case: Price Filter

// Livewire component
public $priceRange = [50, 500];

public function updatedPriceRange($value)
{
    $this->filterProductsByPrice($value);
}

<x-livewire-range-slider
    wire:model="priceRange"
    min="0"
    max="1000"
    step="50"
    label="Price Range ($)"
/>

Implementation Patterns

Common Workflows

1. Basic Range Slider

// Component
public $sliderValue = [10, 90];

public function render()
{
    return view('livewire.slider')->with([
        'slider' => LivewireRangeSlider::make('sliderValue')
            ->min(0)
            ->max(100)
            ->step(5),
    ]);
}

2. Single Value Slider (Pips)

// Component
public $singleValue = 50;

public function render()
{
    return view('livewire.slider')->with([
        'slider' => LivewireRangeSlider::make('singleValue')
            ->min(0)
            ->max(100)
            ->step(1)
            ->pips(true)
            ->pipsFormat('n'),
    ]);
}

3. Dynamic Range (Data-Driven)

// Component
public $dynamicRange = [25, 75];
public $minValue = 0;
public $maxValue = 100;

public function mount()
{
    $this->minValue = DB::table('products')->min('price');
    $this->maxValue = DB::table('products')->max('price');
}

public function render()
{
    return view('livewire.dynamic-slider')->with([
        'slider' => LivewireRangeSlider::make('dynamicRange')
            ->min($this->minValue)
            ->max($this->maxValue)
            ->step(10),
    ]);
}

4. Integration with Alpine.js

<div x-data="{ open: false }">
    <button @click="open = true">Toggle Slider</button>

    <div x-show="open" x-transition>
        <livewire:dynamic-slider />
    </div>
</div>

Integration Tips

Livewire Hooks

protected $listeners = ['refreshSlider' => 'refreshSlider'];

public function refreshSlider()
{
    $this->minValue = DB::table('products')->min('price');
    $this->maxValue = DB::table('products')->max('price');
    $this->emit('sliderUpdated');
}

Custom Events

// Component
public function updatedSliderValue($value)
{
    $this->emit('rangeUpdated', $value);
}

<!-- Parent component -->
<div @range-updated.window="handleRangeUpdate">
    <livewire:child-slider />
</div>

Validation

protected $rules = [
    'rangeValue' => 'required|array|min:2|max:2',
    'rangeValue.*' => 'integer|min:0|max:100',
];

Gotchas and Tips

Pitfalls

1. Alpine.js Conflicts

• Issue: Alpine.js directives (x-) may interfere with Livewire's reactivity.
• Fix: Use x-ignore on parent elements or wrap the slider in a div with x-data isolation:

  <div x-data="{ /* Alpine state */ }">
      <livewire:slider-component />
  </div>
  

2. Step Misalignment

• Issue: Values may not align with step due to floating-point precision.
• Fix: Use integer steps or round values:

  ->step(0.5)
  

  public function updatedRangeValue($value)
  {
      $this->rangeValue = array_map('round', $value, array_fill(0, 2, 2));
  }
  

3. Livewire 4 Migration

• Issue: wire:model syntax changed in Livewire 4.
• Fix: Update to use wire:model.live or wire:model.debounce:

  <x-livewire-range-slider
      wire:model.live="rangeValue"
      debounce="500ms"
      ...
  />
  

4. CSS Overrides

• Issue: Custom styles may not apply due to specificity.
• Fix: Use !important sparingly or target the slider's root class:

  .nouislider-horizontal .noUi-handle {
      background: var(--handle-color) !important;
  }
  

Debugging Tips

1. Check Slider Events

• Tool: Browser DevTools → console.log events:

  document.addEventListener('update.nouislider', (e) => {
      console.log('Slider value:', e.detail);
  });
  

2. Validate Props

• Ensure all required props (min, max, step) are set. Missing props default to null, causing unexpected behavior.

3. Clear Cache

• After updating the package, run:

  php artisan view:clear
  npm run dev
  

Extension Points

1. Custom Toolbar

• Extend the slider with a toolbar using connect:

  ->connect([
      'range' => true,
      'format' => ['to' => 'formatWage($value)'],
  ])
  

  // In a custom Alpine component
  formatWage(value) {
      return `$${value.toLocaleString()}`;
  }
  

2. Dynamic Labels

• Use wire:model modifiers to update labels dynamically:

  public function updatedRangeValue($value)
  {
      $this->minLabel = "Min: {$value[0]}";
      $this->maxLabel = "Max: {$value[1]}";
  }
  

  <div>{{ $minLabel }}</div>
  <x-livewire-range-slider wire:model="rangeValue" />
  <div>{{ $maxLabel }}</div>
  

3. Server-Side Processing

• Offload heavy computations to a queue:

  public function updatedRangeValue($value)
  {
      FilterProductsJob::dispatch($value)->onQueue('filters');
  }
  

Configuration Quirks

1. Default Values

• If wire:model is not set, the slider defaults to [0, 100] if min/max are omitted.

2. Pips Configuration

• Pips require step to be defined. Omitting step with pips(true) will throw an error.

3. Keyboard Navigation

• Ensure the slider is focusable:

  ->keyboardSupport(true)
  

• Test with Tab/Shift+Tab and arrow keys.

4. Localization

• Use format to localize values:

  ->format(['to' => 'formatCurrency', 'from' => 'parseCurrency'])
  

  // In a custom script
  function formatCurrency(value) {
      return new Intl.NumberFormat('de-DE', {
          style: 'currency',
          currency: 'EUR'
      }).format(value);
  }