Skip to main content

​
Overview

The NumberFilter class provides a numeric input filter with optional minimum, maximum, and step constraints. Values are automatically clamped to the specified bounds.

​
Creating a NumberFilter

​
make
static method
required
Creates a new NumberFilter instance.
​
field
string
required
The database column name to filter on
NumberFilter::make('price')

​
Available Methods

​
label

​
label
method
Sets the display label for the filter.
​
label
string
required
The label text to display
NumberFilter::make('price')
    ->label('Product Price')

​
min

​
min
method
Sets the minimum allowed value.
​
min
float
required
Minimum value constraint
NumberFilter::make('price')
    ->min(0)

​
max

​
max
method
Sets the maximum allowed value.
​
max
float
required
Maximum value constraint
NumberFilter::make('price')
    ->max(10000)

​
step

​
step
method
Sets the increment/decrement step for the input.
​
step
float
required
Step value
NumberFilter::make('price')
    ->step(0.01)

​
placeholder

​
placeholder
method
Sets placeholder text for the input field.
​
text
string
required
The placeholder text
NumberFilter::make('quantity')
    ->placeholder('Enter quantity...')

​
key

​
key
method
Overrides the internal key used for the filter.
​
key
string
required
Custom key identifier
NumberFilter::make('product.price')
    ->key('product_price_filter')

​
default

​
default
method
Sets a default value for the filter.
​
value
mixed
required
The default value
NumberFilter::make('discount')
    ->default(10)

​
initialValue

​
initialValue
method
Sets an initial value that is pre-applied when the table first loads.
​
value
mixed
required
The initial value to apply
NumberFilter::make('min_stock')
    ->initialValue(5)

​
filter

​
filter
method
Provides a custom query callback to override the default filter behavior.
​
callback
Closure
required
A closure that receives Builder $query and mixed $value and returns the modified Builder
NumberFilter::make('rating')
    ->label('Minimum Rating')
    ->min(1)
    ->max(5)
    ->filter(function (Builder $query, mixed $value) {
        return $query->where('average_rating', '>=', $value);
    })

​
groupClass / labelClass / inputClass

​
groupClass
method
Sets CSS classes for the filter wrapper, label, or input element.
NumberFilter::make('price')
    ->groupClass('col-md-4')
    ->labelClass('font-semibold')
    ->inputClass('form-control-sm')

​
Value Clamping

The NumberFilter automatically clamps values to stay within the min/max bounds: 
NumberFilter::make('quantity')
    ->min(1)
    ->max(100)
If a user enters 150, it will be clamped to 100 before applying the filter. If a user enters -5, it will be clamped to 1.

​
Default Behavior

By default, NumberFilter applies an exact match query: 
$query->where($fieldName, $clampedValue)
The value is automatically clamped to min/max bounds before the query is applied.

​
Complete Examples

​
Basic Usage

use Livewire\Tables\Filters\NumberFilter;

public function filters(): array
{
    return [
        NumberFilter::make('price')
            ->label('Price')
            ->min(0)
            ->max(10000)
            ->step(0.01)
            ->placeholder('Enter price...'),

        NumberFilter::make('quantity')
            ->label('Quantity')
            ->min(1)
            ->max(100)
            ->step(1),

        NumberFilter::make('discount_percent')
            ->label('Discount %')
            ->min(0)
            ->max(100)
            ->step(5)
            ->initialValue(10),
    ];
}

​
Custom Filter Logic

use Livewire\Tables\Filters\NumberFilter;
use Illuminate\Database\Eloquent\Builder;

public function filters(): array
{
    return [
        NumberFilter::make('min_price')
            ->label('Minimum Price')
            ->min(0)
            ->max(10000)
            ->step(0.01)
            ->filter(function (Builder $query, mixed $value) {
                return $query->where('price', '>=', $value);
            }),

        NumberFilter::make('rating')
            ->label('Minimum Rating')
            ->min(1)
            ->max(5)
            ->step(0.5)
            ->filter(function (Builder $query, mixed $value) {
                return $query->where('average_rating', '>=', $value);
            }),

        NumberFilter::make('stock')
            ->label('Minimum Stock')
            ->min(0)
            ->step(1)
            ->filter(function (Builder $query, mixed $value) {
                return $query->where('stock_quantity', '>=', $value);
            }),
    ];
}

​
Usage in Table Component

use App\Models\Product;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Tables\Filters\NumberFilter;
use Livewire\Tables\Filters\SelectFilter;
use Livewire\Tables\Livewire\DataTableComponent;

class ProductsTable extends DataTableComponent
{
    public function query(): Builder
    {
        return Product::query();
    }

    public function filters(): array
    {
        return [
            NumberFilter::make('price')
                ->label('Exact Price')
                ->min(0)
                ->max(10000)
                ->step(0.01),

            NumberFilter::make('min_stock')
                ->label('Minimum Stock')
                ->min(0)
                ->step(1)
                ->filter(function (Builder $query, mixed $value) {
                    return $query->where('stock_quantity', '>=', $value);
                }),

            SelectFilter::make('category_id')
                ->label('Category')
                ->setOptions(Category::pluck('name', 'id')->toArray()),
        ];
    }
}

​
Decimal Precision

For currency or decimal values, use the step() method: 
NumberFilter::make('price')
    ->label('Price')
    ->min(0)
    ->step(0.01)  // Allows cents

NumberFilter::make('rating')
    ->label('Rating')
    ->min(0)
    ->max(5)
    ->step(0.5)  // Allows half-star ratings

Build docs developers (and LLMs) love

Get started for freeTalk to us