PHPackages                             sadam/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. [Templating & Views](/categories/templating)
4. /
5. sadam/livewire-range-slider

ActiveLibrary[Templating & Views](/categories/templating)

sadam/livewire-range-slider
===========================

A feature-rich, customizable range slider component for Laravel Livewire applications, built on noUiSlider with Alpine.js integration

v1.1.1(1mo ago)13.2k↓44.7%[1 PRs](https://github.com/sadamegal/livewire-range-slider/pulls)MITPHPPHP ^8.1

Since Aug 31Pushed 1mo ago1 watchersCompare

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

READMEChangelog (3)Dependencies (4)Versions (5)Used By (0)

Livewire Range Slider
=====================

[](#livewire-range-slider)

[![Demo of Livewire Range Slider](demo.png)](demo.png)

[![Latest Version](https://camo.githubusercontent.com/1d5873f701fd1643b464100e7474725bea29502625a2aeda17b23df013b6255e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736164616d2f6c697665776972652d72616e67652d736c69646572)](https://packagist.org/packages/sadam/livewire-range-slider) [![License](https://camo.githubusercontent.com/e575905dd1c0add5a071cf627b83d6d118a6021c541d0a399158e7be15493156/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f736164616d2f6c697665776972652d72616e67652d736c69646572)](https://github.com/sadamegal/livewire-range-slider/blob/main/LICENSE.md) [![Total Downloads](https://camo.githubusercontent.com/b62182a28b83c765a829933cf97c2738ade411f3cb2e15391e3dd228f6d5b716/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736164616d2f6c697665776972652d72616e67652d736c69646572)](https://packagist.org/packages/sadam/livewire-range-slider)

A feature-rich, customizable range slider component for Laravel Livewire applications, built on noUiSlider with Alpine.js integration.

> **v1.1.0** - Added Livewire 4 compatibility, updated metadata and documentation. No breaking changes.

> **Upgrading from v0.10?** This release includes significant improvements and breaking changes. Please read the [Migration Guide](#migration-guide) before updating.

> Compatibility: Supports Livewire v3 and v4.

Table of Contents
-----------------

[](#table-of-contents)

- [Installation](#installation)
- [Requirements](#requirements)
- [What's New](#whats-new)
- [Basic Usage](#basic-usage)
- [Available Props](#available-props)
- [Wire Model Modifiers](#wire-model-modifiers)
- [Examples](#examples)
- [Configuration](#configuration)
- [Custom Styling](#custom-styling)
- [Keyboard Support](#keyboard-support)
- [Browser Support](#browser-support)
- [Migration Guide](#migration-guide)
- [Credits](#credits)
- [License](#license)
- [Support](#support)

Installation
------------

[](#installation)

Install via Composer:

```
composer require sadam/livewire-range-slider
```

Publish the assets:

```
php artisan vendor:publish --tag=livewire-range-slider-assets
```

> **⚠️ Note: The package won’t work properly without publishing these assets.**

Optionally, publish the configuration file:

```
php artisan vendor:publish --tag=livewire-range-slider-config
```

Requirements
------------

[](#requirements)

- PHP 8.1 or higher
- Laravel 10.x, 11.x, or 12.x
- Livewire 3.x or 4.x

What's New
----------

[](#whats-new)

This version introduces major improvements over the previous v0.10 release:

- **Simplified Installation**: No npm dependencies required - noUiSlider is now bundled
- **Flexible Wire Models**: Bind to single values or arrays (previously arrays only)
- **Built-in Themes**: 12 color themes out of the box (see [Themes](#themes))
- **New Features**: [Tooltips](#available-props), [pips](#pips-scale-markers), [sizes](#sizes), [variants](#variants), RTL support, and more
- **Configuration File**: Set project-wide defaults (see [Configuration](#configuration))
- **Improved Keyboard Support**: Better debouncing and performance (see [Keyboard Support](#keyboard-support))

**For existing users:** Please see the [Migration Guide](#migration-guide) below for detailed upgrade instructions.

Basic Usage
-----------

[](#basic-usage)

### Single Value Slider

[](#single-value-slider)

```

```

```
class PriceFilter extends Component
{
    public $price = 500;
}
```

*See [Wire Model Modifiers](#wire-model-modifiers) for more options like `wire:model.live` and `wire:model.blur`.*

### Range Slider (Multiple Handles)

[](#range-slider-multiple-handles)

```

```

```
class PriceFilter extends Component
{
    public $priceRange = [200, 800];

    // You can also use 3+ handles
    // public $quartiles = [100, 300, 600, 900];
}
```

Available Props
---------------

[](#available-props)

PropTypeDefaultDescription`min`int/float1Minimum value`max`int/float100Maximum value`step`float1Step increment`tooltips`booltrueShow value tooltips`pips`bool/arrayfalseShow scale markers`theme`string'indigo'Color theme`size`string'medium'Slider size`variant`string'rounded'Handle shape`direction`string'ltr'Slider direction`behaviour`string'tap'Interaction behavior### Themes

[](#themes)

Available themes: `slate`, `indigo`, `teal`, `orange`, `cyan`, `emerald`, `sky`, `amber`, `red`, `rose`, `pink`, `purple`

```

```

See more examples in the [Examples](#examples) section.

### Sizes

[](#sizes)

Available sizes: `small`, `medium`, `large`

```

```

### Variants

[](#variants)

Available variants: `square`, `rounded`

```

```

### Pips (Scale Markers)

[](#pips-scale-markers)

Show evenly distributed markers:

```

```

Show markers at specific values:

```

```

### Behaviour

[](#behaviour)

Controls slider interaction. Common values:

- `tap` - Click to set value
- `drag` - Drag handles only
- `tap-drag` - Both tap and drag
- `snap` - Snap to steps
- `fixed` - Maintain handle distance

See [noUiSlider documentation](https://refreshless.com/nouislider/behaviour-option/) for all options.

```

```

Wire Model Modifiers
--------------------

[](#wire-model-modifiers)

### Live Updates

[](#live-updates)

Update on every change (optimized - only fires after drag ends):

```

```

### Blur Updates

[](#blur-updates)

Update when handle loses focus:

```

```

### Deferred Updates

[](#deferred-updates)

Update when form is submitted (default):

```

```

Examples
--------

[](#examples)

### Price Filter with Theme

[](#price-filter-with-theme)

```

    Price: ${{ $priceRange[0] }} - ${{ $priceRange[1] }}

```

### Volume Control

[](#volume-control)

```

```

### Age Range Selector

[](#age-range-selector)

```

```

Configuration
-------------

[](#configuration)

Customize default values by editing `config/livewire-range-slider.php`:

```
return [
    'theme' => 'indigo',
    'size' => 'medium',
    'variant' => 'rounded',
    'direction' => 'ltr',
    'behaviour' => 'tap',
    'pips' => false,
    'step' => 1,
    'min' => 1,
    'max' => 100,
    'tooltips' => true,
];
```

See how to publish the configuration file in the [Installation](#installation) section.

Custom Styling
--------------

[](#custom-styling)

You can customize the published `public/vendor/livewire-range-slider/range-slider.css` file directly. See available [theme options](#themes)

Keyboard Support
----------------

[](#keyboard-support)

The slider fully supports keyboard navigation:

- Arrow keys to adjust values
- Tab to switch between handles (for range sliders)
- Optimized debouncing for keyboard input to reduce server requests

Browser Support
---------------

[](#browser-support)

Supports all modern browsers that support Alpine.js and noUiSlider.

Migration Guide
---------------

[](#migration-guide)

### Upgrading from Previous Version (v0.10)

[](#upgrading-from-previous-version-v010)

This guide will help you migrate from the previous v0.10 version to the current release.

#### Overview of Changes

[](#overview-of-changes)

**Major Improvements:**

- **No npm Required**: noUiSlider is now bundled - no need to install via npm or modify `app.js`
- **Simplified Wire Model**: Can now bind to single values OR arrays (previously required arrays only)
- **Built-in Theming**: 12 color themes out of the box (previously required manual CSS)
- **Configuration File**: Set project-wide defaults
- **New Features**: Tooltips, pips (scale markers), sizes, variants, RTL support, and customizable behaviour
- **Better Developer Experience**: Comprehensive prop validation and sensible defaults

**Breaking Changes:**

1. Asset management changed - must publish assets
2. Wire model now accepts single values or arrays (previously arrays only)
3. Minimum PHP version is now 8.1
4. Component props expanded from 3 to 11

#### Step-by-Step Migration

[](#step-by-step-migration)

##### Step 1: Clean Up npm Installation

[](#step-1-clean-up-npm-installation)

If you installed noUiSlider manually for the old version, remove it:

```
# Remove from package.json
npm uninstall nouislider
```

Remove the imports from `resources/js/app.js`:

```
// DELETE THESE LINES:
import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';
window.noUiSlider = noUiSlider;
```

Rebuild your assets:

```
npm run build
```

##### Step 2: Publish Package Assets

[](#step-2-publish-package-assets)

The new version bundles noUiSlider and publishes it to your public directory:

```
php artisan vendor:publish --tag=livewire-range-slider-assets
```

This creates:

- `public/vendor/livewire-range-slider/nouislider.min.js`
- `public/vendor/livewire-range-slider/nouislider.min.css`
- `public/vendor/livewire-range-slider/range-slider.css`

##### Step 3: Update Component Properties

[](#step-3-update-component-properties)

**For Single Value Sliders**

Before:

```
public $values = [50]; // Had to be an array
```

```

```

After:

```
public $price = 50; // Can now be a single value
```

```

```

**For Range Sliders**

Before:

```
public $values = [30, 70];
```

```

```

After (same, but with optional enhancements):

```
public $priceRange = [30, 70];
```

```

```

##### Step 4: Replace Custom CSS with Themes (Optional)

[](#step-4-replace-custom-css-with-themes-optional)

Before - You had to write custom CSS:

```
.noUi-target {
    background-color: #8BC34A;
    height: 12px;
    border-radius: 6px;
}

.noUi-handle {
    background-color: #212121;
    border: 2px solid #FFEB3B;
}

.noUi-connect {
    background-color: #FFEB3B;
}
```

After - Use built-in themes:

```

```

Available themes: `slate`, `indigo`, `teal`, `orange`, `cyan`, `emerald`, `sky`, `amber`, `red`, `rose`, `pink`, `purple`

##### Step 5: Use New Features (Optional)

[](#step-5-use-new-features-optional)

Add tooltips:

```

```

Add scale markers:

```

```

Choose a size:

```

```

Choose a variant:

```

```

##### Step 6: Publish Configuration (Optional)

[](#step-6-publish-configuration-optional)

Set project-wide defaults:

```
php artisan vendor:publish --tag=livewire-range-slider-config
```

Edit `config/livewire-range-slider.php`:

```
return [
    'theme' => 'indigo',
    'size' => 'medium',
    'variant' => 'rounded',
    'tooltips' => true,
    'pips' => false,
    // ... more options
];
```

#### Comparison Table

[](#comparison-table)

FeatureOld VersionNew Version**Installation**npm install + app.js configJust publish assets**Wire Model**Arrays only (`$values = [50]`)Single value or array**Props**3 (min, max, step)11 (see [Available Props](#available-props))**Themes**Manual CSS required12 built-in themes**Tooltips**Manual CSS requiredBuilt-in prop**Pips**Not availableBuilt-in prop**Sizes**Not availablesmall, medium, large**Configuration**Not available[Config file](#configuration) support**PHP Version**Any8.1+#### Complete Example

[](#complete-example)

**Before:**

```
// Component
public $values = [200, 800];
```

```

```

```
/* Custom CSS required */
.noUi-target { background-color: #8BC34A; }
.noUi-handle { background-color: #212121; }
.noUi-connect { background-color: #FFEB3B; }
```

**After:**

```
// Component
public $priceRange = [200, 800];
```

```

```

No CSS required!

#### Troubleshooting

[](#troubleshooting)

**Slider Not Appearing**

Make sure you published the assets:

```
php artisan vendor:publish --tag=livewire-range-slider-assets --force
```

See the [Installation](#installation) section for more details.

**Old Styles Conflicting**

If you have custom CSS from the old version, it might conflict with the new themes. Either:

1. Remove your custom CSS and use built-in themes (see [Available Props](#available-props))
2. You can customize the published `public/vendor/livewire-range-slider/range-slider.css` file directly. See available [theme options](#themes)

**Wire Model Not Working**

Make sure you're using the correct binding:

- Single value: `public $price = 50;`
- Range: `public $range = [20, 80];`
- Multiple handles: `public $values = [10, 30, 60, 90];`

See [Basic Usage](#basic-usage) for examples.

---

[↑ Back to top](#livewire-range-slider)

Credits
-------

[](#credits)

Built with:

- [noUiSlider](https://refreshless.com/nouislider/)
- [Alpine.js](https://alpinejs.dev/)
- [Livewire](https://livewire.laravel.com/)

License
-------

[](#license)

MIT License. See [LICENSE](LICENSE.md) for details.

###  Health Score

47

—

FairBetter than 93% of packages

Maintenance95

Actively maintained with recent releases

Popularity24

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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.

###  Release Activity

Cadence

Every ~187 days

Total

4

Last Release

54d ago

Major Versions

v0.1.0 → v1.0.02025-12-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/e201fa2e5a2e298aa46c13ba8ccc0afb8cedc38498782f325a804bd26bb98883?d=identicon)[Sadam](/maintainers/Sadam)

---

Top Contributors

[![sadamegal](https://avatars.githubusercontent.com/u/100015880?v=4)](https://github.com/sadamegal "sadamegal (23 commits)")

---

Tags

alpiblade-componentslaravellivewirelivewire3no-npm-requirednouisliderphprange-sliderrange-slider-componentlaravelbladelivewiresliderrangelaravel12laravel11alpinejstallstackform-componentsnouisliderui-componentlivewire3range-sliderinput-sliderdual-rangemulti-rangeinteractive-formsprice-sliderlivewire4

### Embed Badge

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

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

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[victorybiz/laravel-simple-select

Laravel Simple Select inputs component for Blade and Livewire.

13721.1k](/packages/victorybiz-laravel-simple-select)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1672.4k](/packages/developermithu-tallcraftui)

PHPackages © 2026

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