PHPackages                             ysz/lw-range-slider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ysz/lw-range-slider

ActiveLibrary[Utility & Helpers](/categories/utility)

ysz/lw-range-slider
===================

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

2.1.0(3w ago)26.4k↓77.5%3MITPHPPHP >=8.1CI passing

Since Jun 15Pushed 3w ago1 watchersCompare

[ Source](https://github.com/ghostza1209/lw-range-slider)[ Packagist](https://packagist.org/packages/ysz/lw-range-slider)[ RSS](/packages/ysz-lw-range-slider/feed)WikiDiscussions main Synced 3d ago

READMEChangelog (4)Dependencies (6)Versions (7)Used By (0)

Livewire Range Slider
---------------------

[](#livewire-range-slider)

[![Latest Stable Version](https://camo.githubusercontent.com/3a04cb607fa28700d76f754855346333bc08b582bc8966e0bc0ff7e9cd85ba3d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f79737a2f6c772d72616e67652d736c69646572)](https://packagist.org/packages/ysz/lw-range-slider)[![Total Downloads](https://camo.githubusercontent.com/c6111e5474d0d83501985b89434749d5c2192204d6971a044ef0a915854ebc01/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f79737a2f6c772d72616e67652d736c69646572)](https://packagist.org/packages/ysz/lw-range-slider)[![License](https://camo.githubusercontent.com/d7aacb7cbc9548df06973e79f6abfbc1847efc500480db44da5472ef5209dc34/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f79737a2f6c772d72616e67652d736c69646572)](https://packagist.org/packages/ysz/lw-range-slider)

#### Inspired by , Please check it out!

[](#inspired-by-httpsgithubcomjantinnerezolivewire-range-slider-please-check-it-out)

An effortless blade component, [noUiSlider](https://github.com/leongersen/noUiSlider), tailored for your [Livewire](https://github.com/livewire/livewire) Components.

### Installation

[](#installation)

You can install the package via composer:

```
composer require ysz/lw-range-slider
```

Register the script component to template after the `@livewireScripts`

```

```

### Requirements

[](#requirements)

This package is designed to be used in conjunction with [Livewire](https://laravel-livewire.com/) components. Please ensure that you exclusively utilize it within Livewire projects.

- PHP 8.1 or higher
- Laravel 10.x, 11.x, or 12.x
- [Livewire ^3.0](https://laravel-livewire.com/)
- [Alpine](https://alpinejs.dev)
- (included) [noUiSlider](https://github.com/leongersen/noUiSlider)

### How to use it!

[](#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](https://refreshless.com/nouislider/slider-options/) that you provide to the component. For additional details and configurations, please refer to [noUiSlider](https://refreshless.com/nouislider/)

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

### Livewire's default `wire:model` attribute

[](#livewires-default-wiremodel-attribute)

```

```

### Deferred Updating

[](#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.

```

```

### Lazy Updating

[](#lazy-updating)

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

```

```

### Emitting events

[](#emitting-events)

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

```