PHPackages                             jaysontemporas/filament-nouislider - 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. jaysontemporas/filament-nouislider

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

jaysontemporas/filament-nouislider
==================================

A Filament component for seamlessly integrating NoUiSlider, a highly customizable and lightweight slider library.

1.0.0(1y ago)2377↓100%MITPHPPHP ^8.0

Since Jan 20Pushed 1y ago1 watchersCompare

[ Source](https://github.com/jayson-temporas/filament-nouislider)[ Packagist](https://packagist.org/packages/jaysontemporas/filament-nouislider)[ RSS](/packages/jaysontemporas-filament-nouislider/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

NoUiSlider Filament Component
=============================

[](#nouislider-filament-component)

A custom Filament form component that integrates [noUiSlider](https://refreshless.com/nouislider/), a lightweight JavaScript library for creating highly customizable sliders. This component allows you to add a dynamic and interactive slider to your Filament forms with ease.

Features
--------

[](#features)

- Supports single and range sliders.
- Customizable slider configuration.
- Easy integration with Filament forms.

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

[](#installation)

Require the package via Composer:

```
composer require jaysontemporas/filament-nouislider
```

Usage
-----

[](#usage)

You can use the `NoUiSlider` component in your Filament forms as follows:

### Basic Example

[](#basic-example)

```
use JaysonTemporas\FilamentNoUiSlider\Forms\Components\NoUiSlider;

NoUiSlider::make('price')
    ->min(0)
    ->max(1000)
    ->defaultStart(500)
    ->step(10)
    ->tooltip()
```

### Range Slider

[](#range-slider)

```
NoUiSlider::make('price_range')
    ->range()
    ->min(0)
    ->max(1000)
    ->step(50)
    ->defaultStart([200, 800])
    ->label('Price Range')
    ->helperText('Select a price range.');
```

Range slider will return an array of selected points. On your model, you can cast your column to array

```
protected $casts = [
    'price_range' => 'array',
];

// Ex. "[200, 800]" will be saved to your price_range column
```

You can also use mutateFormDataBeforeCreate() on your Create page / Form to modify the behaviour before saving

```
protected function mutateFormDataBeforeCreate(array $data): array
{
    // $data['price_range'][0]
    // $data['price_range'][1]

    return $data;
}
```

### Additional Configuration

[](#additional-configuration)

You can pass additional configs to the slider by chaining

```
NoUiSlider::make('my_slider')
    ->range()
    ->min(0)
    ->max(10000)
    ->step(100)
    ->defaultStart([1000, 3000, 6000]) // range with 3 points
    ->connect([false, true, true, false])
    /**
         min and first handle is not connected
         first handle and second handle is connected
         second handle and third handle is connected
         third handle and max is not connected
    */
    ->tooltip([true, true, true])
    ->orientation('horizontal')
    ->color('primary') // primary, gray, success, danger, info
    ->height(20)
    ->handleSize(34)
    ->tooltipPrefix('$')
    ->tooltipSuffix('USD')
    ->decimal(2)
    ->mergeOverlappingTooltip()
    ->pips([
        'mode' => 'positions',
        'values' => [0, 25, 50, 75, 100],
        'density' => 4,
        'stepped' => true,
    ])
```

Vertical Slider
---------------

[](#vertical-slider)

You can use vertial orientation but make sure you adjust your slider's height

```
NoUiSlider::make('slider2')
    ->range()
    ->min(0)
    ->max(10000)
    ->step(100)
    ->defaultStart([1000, 3000, 6000])
    ->connect([false, true, true, false])
    ->tooltip([true, true, true])
    ->orientation('vertical')
    ->color('primary')
    ->height(400) // Adjust slider height
    ->handleSize(34)
    ->tooltipPrefix('$')
    ->decimal(2)
    ->mergeOverlappingTooltip()
    ->pips([
        'mode' => 'positions',
        'values' => [0, 25, 50, 75, 100],
        'density' => 4,
        'stepped' => true,
    ]),
```

Styling
-------

[](#styling)

You can use your app default colors (primary, gray, info, success, warning, danger)

```
NoUiSlider::make('price')
    ->min(0)
    ->max(1000)
    ->color('info')
```

You can also style each section

```
$this
    ->height(20)
    ->handleSize(34)
    ->handleColor('#3b82f6')
    ->handleBorderColor('#ffffff')
    ->handleBorderWidth(1)
    ->connectColor('#3b82f6')
    ->tooltipColor('#3b82f6')
    ->tooltipTextColor('#ffffff')
    ->trackColor('#e5e7eb');
```

Additional Options
------------------

[](#additional-options)

- mergeOverlappingTooltip()
- circleHandle(), squareHandle()
- sliderDisabled()
- tooltipPrefix('$'), tooltipSuffix(' celsius')
- pips(pips config here)

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

[](#requirements)

- PHP 8.0+
- Laravel 10+
- Filament 3+

Contributing
------------

[](#contributing)

Feel free to submit issues or pull requests. Contributions are welcome!

License
-------

[](#license)

This project is open-source and licensed under the [MIT license](LICENSE).

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance42

Moderate activity, may be stable

Popularity17

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

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

Unknown

Total

1

Last Release

478d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6dc94dacfbb7331ea5a1084e7147c771e3deb4fb6f0ff06089c0aa246a0a79d9?d=identicon)[jayson-temporas](/maintainers/jayson-temporas)

---

Tags

laravelcomponentsliderfilamentnouislider

### Embed Badge

![Health badge](/badges/jaysontemporas-filament-nouislider/health.svg)

```
[![Health](https://phpackages.com/badges/jaysontemporas-filament-nouislider/health.svg)](https://phpackages.com/packages/jaysontemporas-filament-nouislider)
```

###  Alternatives

[tomatophp/filament-icons

Picker & Table Column & Icons Provider for FilamentPHP

3598.2k13](/packages/tomatophp-filament-icons)[tapp/filament-auditing

Filament Laravel Auditing plugin.

113379.4k2](/packages/tapp-filament-auditing)[tapp/filament-timezone-field

Filament timezone field.

55276.6k4](/packages/tapp-filament-timezone-field)[webbingbrasil/filament-maps

Map components for Filament.

7834.1k](/packages/webbingbrasil-filament-maps)[marcogermani87/filament-cookie-consent

Easy cookie consent integrations for Filament

1917.0k](/packages/marcogermani87-filament-cookie-consent)[mohamedsabil83/filament-hijri-picker

A Hijri date time picker component for Filament

224.4k](/packages/mohamedsabil83-filament-hijri-picker)

PHPackages © 2026

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