ysz/lw-range-slider

A simple noUiSlider blade component designed specifically for your Livewire Components.

Maintainers

Details

github.com/ghostza1209/lw-range-slider

Source

Issues

Installs: 2 001

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 1

Open Issues: 0

2.0.0 2024-07-14 06:12 UTC

Requires

MIT 200ecb7171c2fac5d3aa111fc5766183a7c226c3

  • Ysz

This package is auto-updated.

Last update: 2024-11-14 06:56:30 UTC

README

Latest Stable Version Total Downloads License

Inspired by https://github.com/jantinnerezo/livewire-range-slider, Please check it out!

An effortless blade component, noUiSlider, tailored for your Livewire Components.

Installation

You can install the package via composer:

composer require ysz/lw-range-slider

Register the script component to template after the @livewireScripts

<html>
    <body>
        <!-- @livewireScripts -->

        <x-livewire-range-slider::scripts />
    </body>
</html>

Requirements

This package is designed to be used in conjunction with Livewire components. Please ensure that you exclusively utilize it within Livewire projects.

How to use it!

Please add this properties inside your existing Livewire component.

public $options = [
    'start' => [
        20,
        50
    ],
    'range' => [
        'min' =>  [1],
        'max' => [100]
    ],
    'connect' => true,
    'behaviour' => 'tap-drag',
    'tooltips' => true,
    'pips' => [
        'mode' => 'steps',
        'stepped' => true,
        'density' => 4
    ],
    ...
];

public array $sliderValues;

The $options property represents the noUiSlider options that you provide to the component. For additional details and configurations, please refer to noUiSlider

The $sliderValues property is the model for the range slider values.

Livewire's default wire:model attribute

<x-range-slider :options="$options" wire:model.live="sliderValues" />

Deferred Updating

In cases where you don't need data updates to happen live, you can remove all modifiers to batch data updates with the next network request.

<x-range-slider :options="$options" wire:model="sliderValues" />

Lazy Updating

You can also use .blur modifier to update the data after the user has finished interacting with the slider.

<x-range-slider :options="$options" wire:model.blur="sliderValues" />

Emitting events

To update the start or range values for noUiSlider, call the firePriceRangeChangedEvent method.

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use YsZ\LwRangeSlider\Contracts\CanFireEvents;

class AvailableUnits extends Component
{
    use CanFireEvents;
    
    public function updated($name, $value)
    {
        $this->firePriceRangeChangedEvent(min: 80, max: 150, minRange: 100, maxRange: 200);
    }
}

this will immediately update the range and start values for noUiSlider.

Customizing the slider

You can publish these blade file to resources/views/vendor/livewire-range-slider and customize it.

php artisan vendor:publish --tag=lw-range-slider-views

To customize the noUiSlider options from the published file, as certain options cannot be passed from the Livewire component due to them not being valid JSON when used as a callback function.

<div
    x-data='LivewireRangeSlider({
        options: {
            start: [{{ $this->minPrice }}, {{ $this->maxPrice }}],
            connect: true,
            tooltips: true,
            tooltips: {
                to: function (value) {
                    return window?.currencyFormat("site", value);
                },
                from: function (value) {
                    return window?.currencyFormat("site", value);
                }
            },
            range: {
                min: {{ $this->minPrice }},
                max: {{ $this->maxPrice }}
            }
        },
        models: {!! json_encode($getWireModel($attributes)) !!},
        modifier: "{{ $getWireModelModifier($attributes) }}"
    })'
    @focusout="setValue"
    {{ $attributes }}
    wire:ignore
>
    <div x-ref="range"></div>
    {{ $slot }}
</div>