PHPackages                             lematosdefuk/livewire-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. lematosdefuk/livewire-range-slider

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

lematosdefuk/livewire-range-slider
==================================

A Tall Stack wrapper for noUiSlider Range Slider

01PHP

Since May 30Pushed 3y agoCompare

[ Source](https://github.com/LeMatosDeFuk/livewire-range-slider)[ Packagist](https://packagist.org/packages/lematosdefuk/livewire-range-slider)[ RSS](/packages/lematosdefuk-livewire-range-slider/feed)WikiDiscussions main Synced today

READMEChangelog (1)DependenciesVersions (1)Used By (0)

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

[](#livewire-range-slider)

[![Latest Stable Version](https://camo.githubusercontent.com/d26ad1f8bfd10595eb450a9d8a19ed457a3cd431f65af9739de5ba80b0fb5aac/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6a616e74696e6e6572657a6f2f6c697665776972652d72616e67652d736c69646572)](https://packagist.org/packages/jantinnerezo/livewire-range-slider)[![Total Downloads](https://camo.githubusercontent.com/36214aefccdbabd743064e3808ffc22fdb849b69e140c614e84b4b6aae0aa112/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a616e74696e6e6572657a6f2f6c697665776972652d72616e67652d736c69646572)](https://packagist.org/packages/jantinnerezo/livewire-range-slider)[![License](https://camo.githubusercontent.com/83e5ff1d1892520a44ddd3275837a5008918f29bd1e45844a64a562a73b1f76e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6a616e74696e6e6572657a6f2f6c697665776972652d72616e67652d736c69646572)](https://packagist.org/packages/jantinnerezo/livewire-range-slider)

A simple [noUiSlider](https://github.com/leongersen/noUiSlider) blade component for your Livewire Components.

[![preview](https://camo.githubusercontent.com/12f5e12000c1c85937f50a0e3735665ab54ad687502ae98781364f7838718221/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c6976657769726525323052616e6765253230536c696465722e6a7065673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6a616e74696e6e6572657a6f2532466c697665776972652d72616e67652d736c69646572267061747465726e3d74696e79436865636b657273267374796c653d7374796c655f31266465736372697074696f6e3d412b73696d706c652b6e6f5569536c696465722b626c6164652b636f6d706f6e656e742b666f722b796f75722b4c697665776972652b436f6d706f6e656e74732e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d61646a7573746d656e7473)](https://camo.githubusercontent.com/12f5e12000c1c85937f50a0e3735665ab54ad687502ae98781364f7838718221/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c6976657769726525323052616e6765253230536c696465722e6a7065673f7468656d653d6c69676874267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6a616e74696e6e6572657a6f2532466c697665776972652d72616e67652d736c69646572267061747465726e3d74696e79436865636b657273267374796c653d7374796c655f31266465736372697074696f6e3d412b73696d706c652b6e6f5569536c696465722b626c6164652b636f6d706f6e656e742b666f722b796f75722b4c697665776972652b436f6d706f6e656e74732e266d643d312673686f7757617465726d61726b3d3026666f6e7453697a653d313030707826696d616765733d61646a7573746d656e7473)

### Installation

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

```

```

### Requirements

[](#requirements)

This package is meant to use with [Livewire](https://laravel-livewire.com/) components. Make sure you are using it with Livewire projects only.

- PHP 7.4 or higher
- Laravel 8 and 9
- [Livewire](https://laravel-livewire.com/)
- [Alpine](https://alpinejs.dev)
- [noUiSlider](https://github.com/leongersen/noUiSlider) - already included into the package's bundled scripts.

### Usage

[](#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](https://refreshless.com/nouislider/).

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

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

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

```

```

#### Deferred

[](#deferred)

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

```

```

#### Multiple properties

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

```

```

###  Health Score

13

—

LowBetter than 1% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity1

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity22

Early-stage or recently created project

 Bus Factor1

Top contributor holds 82.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/45625770?v=4)[Matěj Černý](/maintainers/LeMatosDeFuk)[@LeMatosDeFuk](https://github.com/LeMatosDeFuk)

---

Top Contributors

[![jantinnerezo](https://avatars.githubusercontent.com/u/29738837?v=4)](https://github.com/jantinnerezo "jantinnerezo (29 commits)")[![LeMatosDeFuk](https://avatars.githubusercontent.com/u/45625770?v=4)](https://github.com/LeMatosDeFuk "LeMatosDeFuk (3 commits)")[![devadattas](https://avatars.githubusercontent.com/u/56180?v=4)](https://github.com/devadattas "devadattas (2 commits)")[![MB116](https://avatars.githubusercontent.com/u/9277618?v=4)](https://github.com/MB116 "MB116 (1 commits)")

### Embed Badge

![Health badge](/badges/lematosdefuk-livewire-range-slider/health.svg)

```
[![Health](https://phpackages.com/badges/lematosdefuk-livewire-range-slider/health.svg)](https://phpackages.com/packages/lematosdefuk-livewire-range-slider)
```

###  Alternatives

[kirschbaum-development/commentions

A package to allow you to create comments, tag users and more

149129.0k](/packages/kirschbaum-development-commentions)[bramdeleeuw/cookieconsent

GDPR compliant cookie bar and consent checker

1511.7k2](/packages/bramdeleeuw-cookieconsent)[voodoophp/paginator

Paginator is a simple class that allows you to create pagination. It doesn't require any database connection. It is compatible with Twitter's Bootstrap Framework, by using the CSS class pagination that is also attached.

351.5k1](/packages/voodoophp-paginator)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)