PHPackages                             price-range/price-range-filter - 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. price-range/price-range-filter

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

price-range/price-range-filter
==============================

A custom Laravel Filament plugin for price range filtering with dual-handle slider

0101PHP

Since Sep 25Pushed 7mo agoCompare

[ Source](https://github.com/Shivam1234321/filament-price-range)[ Packagist](https://packagist.org/packages/price-range/price-range-filter)[ RSS](/packages/price-range-price-range-filter/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

PriceRangeFilter - Laravel Filament Plugin - Update
===================================================

[](#pricerangefilter---laravel-filament-plugin---update)

A custom Laravel Filament plugin that provides a beautiful dual-handle range slider for price filtering in forms and tables.

Features
--------

[](#features)

- 🎯 **Dual-handle range slider** with smooth dragging
- 📱 **Touch-friendly** interface for mobile devices
- 🎨 **Customizable styling** with multiple color variants
- 💾 **Flexible data storage** (JSON or separate columns)
- 🔧 **Highly configurable** min/max values and step size
- 📊 **Table filtering** support
- 📝 **Form field** support
- 🌙 **Dark mode** compatible
- ♿ **Accessibility** features included

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

[](#installation)

### 1. Install via Composer

[](#1-install-via-composer)

```
composer require price-range/price-range-filter:dev-master
```

### 2. Publish Assets

[](#2-publish-assets)

Publish the configuration file:

```
php artisan vendor:publish --tag=price-range-filter-config
```

Publish the views (optional):

```
php artisan vendor:publish --tag=price-range-filter-views
```

Publish the assets (CSS and JavaScript):

```
php artisan vendor:publish --tag=price-range-filter-assets
```

### 3. Include Assets in Your Layout

[](#3-include-assets-in-your-layout)

Add the CSS and JavaScript to your Filament layout or app layout:

```

```

Or if you're using Vite, you can import them:

```
// In your app.js or main.js
import '../vendor/price-range-filter/css/price-range-filter.css';
import '../vendor/price-range-filter/js/price-range-filter.js';
```

### 4. Configure (Optional)

[](#4-configure-optional)

Edit the published config file at `config/price-range-filter.php` to customize default values:

```
return [
    'defaults' => [
        'min_value' => 0,
        'max_value' => 10000,
        'step' => 1,
        'from_label' => 'FROM',
        'to_label' => 'TO',
        'show_labels' => true,
    ],
    // ... other configuration options
];
```

Usage
-----

[](#usage)

### In Filament Forms

[](#in-filament-forms)

```
use PriceRange\PriceRangeFilter\Forms\Components\PriceRangeFilter;

// Basic usage
PriceRangeFilter::make('price_range')
    ->minValue(0)
    ->maxValue(10000)
    ->step(100)

// Advanced configuration
PriceRangeFilter::make('price_range')
    ->minValue(100)
    ->maxValue(50000)
    ->step(50)
    ->fromLabel('MIN PRICE')
    ->toLabel('MAX PRICE')
    ->showLabels(true)
    ->minFieldName('min_price')
    ->maxFieldName('max_price')
```

### In Filament Tables (as Filter)

[](#in-filament-tables-as-filter)

```
use PriceRange\PriceRangeFilter\Tables\Filters\PriceRangeFilter;

// Basic usage
PriceRangeFilter::make('price_range')
    ->minColumn('min_price')
    ->maxColumn('max_price')

// Advanced configuration
PriceRangeFilter::make('price_range')
    ->minColumn('min_price')
    ->maxColumn('max_price')
    ->minValue(0)
    ->maxValue(10000)
    ->step(100)
    ->fromLabel('MIN')
    ->toLabel('MAX')
```

Database Storage
----------------

[](#database-storage)

The plugin supports two storage methods:

### 1. JSON Storage (Default)

[](#1-json-storage-default)

Store both values in a single JSON column:-

```
// Migration
Schema::table('products', function (Blueprint $table) {
    $table->json('price_range')->nullable();
});

// Model
class Product extends Model
{
    protected $casts = [
        'price_range' => 'array',
    ];
}
```

### 2. Separate Columns

[](#2-separate-columns)

Store values in separate columns:

```
// Migration
Schema::table('products', function (Blueprint $table) {
    $table->integer('min_price')->nullable();
    $table->integer('max_price')->nullable();
});
```

Configuration Options
---------------------

[](#configuration-options)

### Form Component Options

[](#form-component-options)

MethodDescriptionDefault`minValue(int $value)`Minimum allowed value0`maxValue(int $value)`Maximum allowed value10000`step(int $value)`Step increment1`fromLabel(string $label)`Label for minimum value'FROM'`toLabel(string $label)`Label for maximum value'TO'`showLabels(bool $show)`Show value labelstrue`minFieldName(string $name)`Name for min input field'min\_price'`maxFieldName(string $name)`Name for max input field'max\_price'### Table Filter Options

[](#table-filter-options)

MethodDescriptionDefault`minColumn(string $column)`Database column for minimum value'min\_price'`maxColumn(string $column)`Database column for maximum value'max\_price'`minValue(int $value)`Minimum allowed value0`maxValue(int $value)`Maximum allowed value10000`step(int $value)`Step increment1`fromLabel(string $label)`Label for minimum value'FROM'`toLabel(string $label)`Label for maximum value'TO'Styling
-------

[](#styling)

The plugin includes several built-in color variants:

```
/* Apply variants via CSS classes */
.price-range-filter-container.variant-green { /* Green theme */ }
.price-range-filter-container.variant-red { /* Red theme */ }
.price-range-filter-container.variant-purple { /* Purple theme */ }
```

Customization
-------------

[](#customization)

### Custom CSS

[](#custom-css)

You can customize the appearance by overriding the CSS classes:

```
/* Custom styling */
.price-range-track {
    background-color: #your-color;
    height: 8px;
}

.price-range-handle {
    width: 24px;
    height: 24px;
    background-color: #your-color;
}
```

### Custom JavaScript

[](#custom-javascript)

The JavaScript class is available globally as `PriceRangeFilter`:

```
// Initialize manually
const slider = new PriceRangeFilter(element, {
    min: 0,
    max: 1000,
    step: 10,
    fromLabel: 'Min',
    toLabel: 'Max'
});

// Listen for changes
element.addEventListener('priceRangeChange', (event) => {
    console.log('Range changed:', event.detail);
});
```

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

[](#requirements)

- PHP 8.1+
- Laravel 10+
- Filament 3.0+
- Livewire 3.0+

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

[](#browser-support)

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

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

[](#contributing)

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

License
-------

[](#license)

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

Support
-------

[](#support)

If you encounter any issues or have questions, please open an issue on GitHub or contact the maintainers.

Changelog
---------

[](#changelog)

### v1.0.0

[](#v100)

- Initial release
- Dual-handle range slider
- Form and table filter support
- Customizable styling
- Touch support
- Dark mode compatibility

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance47

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity13

Early-stage or recently created project

 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.

### Community

Maintainers

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

---

Top Contributors

[![shivam007-tech](https://avatars.githubusercontent.com/u/207821898?v=4)](https://github.com/shivam007-tech "shivam007-tech (17 commits)")

### Embed Badge

![Health badge](/badges/price-range-price-range-filter/health.svg)

```
[![Health](https://phpackages.com/badges/price-range-price-range-filter/health.svg)](https://phpackages.com/packages/price-range-price-range-filter)
```

###  Alternatives

[corviz/br-gpdpl

A lib that provides a series of data anonymizers, compliant with brazilian General Personal Data Protection Law (aka LGPD, in pt-br)

1613.6k](/packages/corviz-br-gpdpl)[afaya/edge-tts

Edge TTS is a PHP package that allows access to the online text-to-speech service used by Microsoft Edge without the need for Microsoft Edge, Windows, or an API key.

151.0k1](/packages/afaya-edge-tts)

PHPackages © 2026

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