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

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

vortechron/livewire-range-slider
================================

A Tall Stack wrapper for noUiSlider Range Slider

049PHP

Since Jun 28Pushed 2y agoCompare

[ Source](https://github.com/vortechron/livewire-range-slider)[ Packagist](https://packagist.org/packages/vortechron/livewire-range-slider)[ RSS](/packages/vortechron-livewire-range-slider/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (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

16

—

LowBetter than 5% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity22

Early-stage or recently created project

 Bus Factor1

Top contributor holds 80.6% 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://www.gravatar.com/avatar/f67c8081fd634e87bab7418d27abecbbad252aa55c080f4472b40c0a69c3a922?d=identicon)[vortechron](/maintainers/vortechron)

---

Top Contributors

[![jantinnerezo](https://avatars.githubusercontent.com/u/29738837?v=4)](https://github.com/jantinnerezo "jantinnerezo (29 commits)")[![vortechron](https://avatars.githubusercontent.com/u/22893960?v=4)](https://github.com/vortechron "vortechron (4 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/vortechron-livewire-range-slider/health.svg)

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

###  Alternatives

[bueltge/wordpress-multisite-enhancements

Enhance Multisite for Network Admins with different topics

1113.6k](/packages/bueltge-wordpress-multisite-enhancements)

PHPackages © 2026

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