dashed/livewire-range-slider

A Tall Stack wrapper for noUiSlider Range Slider

Maintainers

Details

github.com/Dashed-DEV/livewire-range-slider

Homepage

Source

Installs: 46

Dependents: 1

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 19

v1.0.1 2024-03-15 10:32 UTC

Requires

  • php: ^8.0

Requires (Dev)

MIT d78a278c86172d965c8cadf6975a9b8c934a885a

  • Robin van Maasakker <robin.woop@dashed.nl>

jantinnerezolivewire-range-slider

This package is auto-updated.

Last update: 2024-10-15 11:49:51 UTC

README

Latest Stable Version Total Downloads License

A simple noUiSlider blade component for your Livewire Components.

preview

Installation

To get started, require the package to your project's composer.json

composer require jantinnerezo/livewire-range-slider

Next, add the scripts component to your template after the @livewireScripts.

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

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

Requirements

This package is meant to use with Livewire components. Make sure you are using it with Livewire projects only.

Usage

Assuming you have this properties inside your livewire component.

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

public $values;

The $options property is simply the noUiSlider options you pass to the component, for more details and configurations please check noUiSlider - JavaScript Range Slider | Refreshless.com.

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

Livewire's default wire:model attribute

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

Deferred

In cases where you don't need range slider to update live, you can use .defer modifier.

<x-range-slider :options="$options" wire:model.defer="values" />

Multiple properties

Targetting a property for each handle also works out-of-the-box, simply add the properties comma separated.

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

public $range = [
    'min' => 10, // Targets handle 1 value
    'max' => 100 // Targets handle 2 value
];
<x-range-slider :options="$options" wire:model="range.min,range.max" />