jantinnerezo/livewire-range-slider

A Tall Stack wrapper for noUiSlider Range Slider

Maintainers

Details

github.com/jantinnerezo/livewire-range-slider

Homepage

Source

Issues

Installs: 8 082

Dependents: 1

Suggesters: 0

Security: 0

Stars: 14

Watchers: 1

Forks: 19

Open Issues: 10

1.0.1 2022-06-11 14:39 UTC

Requires

Requires (Dev)

MIT e2c20e78a30ee399f8614df64c293a1a69c799b7

  • Jantinn Erezo <erezojantin.woop@gmail.com>

jantinnerezolivewire-range-slider

This package is auto-updated.

Last update: 2024-10-24 13:35:28 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" />