santoshjena/livewire-range-slider

A Tall Stack wrapper for noUiSlider Range Slider

Maintainers

Details

github.com/santoshjena007/livewire-range-slider

Homepage

Source

Installs: 65

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 0

Forks: 25

pkg:composer/santoshjena/livewire-range-slider

1.0.2 2024-08-07 11:00 UTC

Requires

Requires (Dev)

MIT b5aca4b2fb2e7071bc11d2067d4c377c448d3ba0

  • Santosh Jena <santoshk.jena.woop@hyscaler.com>

livewire-range-slidersantoshjena

This package is not auto-updated.

Last update: 2026-01-08 16:28:05 UTC

README

A simple noUiSlider blade component for your Livewire Components.

Installation

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

composer require santoshjena/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" />