Skip to content

Feature: Slider #15507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 35 commits into from
Apr 25, 2025
Merged

Feature: Slider #15507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
17c41de
nouislider js
thethunderturner Feb 3, 2025
ff4b079
nouislider php classes + build
thethunderturner Feb 3, 2025
71f8d8a
fix namespaces
thethunderturner Feb 3, 2025
7a7ce90
blade fix
thethunderturner Feb 3, 2025
1b4dd26
blade fix
thethunderturner Feb 3, 2025
d3659e0
tw v4 fix
thethunderturner Feb 3, 2025
b4b278b
one more tw v4 fix
thethunderturner Feb 3, 2025
bf86cf2
connect function fix
thethunderturner Feb 3, 2025
3b38f3a
slider docs
thethunderturner Feb 3, 2025
deed556
docs assets screenshots
thethunderturner Feb 3, 2025
5c5176d
composer cs
thethunderturner Feb 3, 2025
15d2fc1
phpstan
thethunderturner Feb 3, 2025
41cf98c
Update 19-slider.md
thethunderturner Feb 3, 2025
1ba13bd
unnecessary css classes
thethunderturner Feb 3, 2025
e866bd0
merge 4.x
thethunderturner Feb 7, 2025
2b12c87
npm run build
thethunderturner Feb 7, 2025
afd793c
chore: fix code style
thethunderturner Feb 7, 2025
fda8e63
Update packages/forms/docs/02-fields/19-slider.md
thethunderturner Feb 8, 2025
3886562
docs update
thethunderturner Feb 8, 2025
6f08ebf
merge 4.x
thethunderturner Mar 18, 2025
41b9643
rename files
thethunderturner Mar 18, 2025
4f80069
filament assets
thethunderturner Mar 18, 2025
7d24377
fix variable names
thethunderturner Mar 18, 2025
02d5f17
chore: fix code style
thethunderturner Mar 18, 2025
f6c572d
slider shows
thethunderturner Mar 18, 2025
14583a0
update documentation
thethunderturner Mar 19, 2025
1aed890
demo fix
thethunderturner Mar 19, 2025
73ee3e7
refactor
thethunderturner Mar 19, 2025
f778138
style improvements
thethunderturner Mar 19, 2025
32b5ff6
styling
thethunderturner Mar 19, 2025
8db5efc
Merge branch '4.x' into pr/15507
danharrin Apr 23, 2025
cd5f526
work on slider
danharrin Apr 23, 2025
50f15da
wip
danharrin Apr 24, 2025
923de4c
start docs
danharrin Apr 25, 2025
c3180dc
finish docs
danharrin Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions bin/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const formComponents = [
'markdown-editor',
'rich-editor',
'select',
'slider',
'tags-input',
'textarea',
]
Expand Down
285 changes: 285 additions & 0 deletions docs-assets/app/app/Livewire/Forms/FieldsDemo.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Slider;
use Filament\Forms\Components\Slider\Enums\PipsMode;
use Filament\Forms\Components\TagsInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
Expand All @@ -34,6 +36,7 @@
use Filament\Schemas\Schema;
use Filament\Support\Enums\FontWeight;
use Filament\Support\Icons\Heroicon;
use Filament\Support\RawJs;
use Illuminate\Support\HtmlString;
use Livewire\Component;

Expand Down Expand Up @@ -1568,6 +1571,288 @@ public function form(Schema $form): Schema
->icon(Heroicon::Clipboard),
),
]),
Group::make()
->id('slider')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('slider')
->label('Slider')
->default(50),
]),
Group::make()
->id('sliderRange')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderRange')
->label('Slider')
->range(minValue: 40, maxValue: 80)
->default(50),
]),
Group::make()
->id('sliderMultiple')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderMultiple')
->label('Slider')
->default([20, 70]),
]),
Group::make()
->id('sliderVertical')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderVertical')
->label('Slider')
->vertical()
->default(50),
]),
Group::make()
->id('sliderTooltips')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderTooltips')
->label('Slider')
->tooltips()
->default(50),
]),
Group::make()
->id('sliderTooltipsMultiple')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderTooltipsMultiple')
->label('Slider')
->tooltips([true, false])
->default([20, 70]),
]),
Group::make()
->id('sliderTooltipsVertical')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderTooltipsVertical')
->label('Slider')
->tooltips()
->vertical()
->default(50),
]),
Group::make()
->id('sliderTooltipsFormatting')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderTooltipsFormatting')
->label('Slider')
->tooltips(RawJs::make('`$${$value.toFixed(2)}`'))
->default(64.99),
]),
Group::make()
->id('sliderFill')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderFill')
->label('Slider')
->fillTrack()
->default(50),
]),
Group::make()
->id('sliderFillMultiple')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderFillMultiple')
->label('Slider')
->fillTrack([false, true, false])
->default([20, 70]),
]),
Group::make()
->id('sliderFillVertical')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderFillVertical')
->label('Slider')
->fillTrack()
->vertical()
->default(50),
]),
Group::make()
->id('sliderPips')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPips')
->label('Slider')
->pips()
->default(50),
]),
Group::make()
->id('sliderPipsMultiple')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsMultiple')
->label('Slider')
->pips()
->default([20, 70]),
]),
Group::make()
->id('sliderPipsVertical')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsVertical')
->label('Slider')
->pips()
->vertical()
->default(50),
]),
Group::make()
->id('sliderPipsDensity')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsDensity')
->label('Slider')
->pips(density: 5)
->default(50),
]),
Group::make()
->id('sliderPipsFormatting')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsFormatting')
->label('Slider')
->pips()
->pipsFormatter(RawJs::make('`$${$value.toFixed(2)}`'))
->default(50),
]),
Group::make()
->id('sliderPipsSteps')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsSteps')
->label('Slider')
->step(10)
->pips(PipsMode::Steps)
->default(50),
]),
Group::make()
->id('sliderPipsStepsDensity')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsStepsDensity')
->label('Slider')
->step(10)
->pips(PipsMode::Steps, density: 5)
->default(50),
]),
Group::make()
->id('sliderPipsPositions')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsPositions')
->label('Slider')
->pips(PipsMode::Positions)
->pipsValues([0, 25, 50, 75, 100])
->default(50),
]),
Group::make()
->id('sliderPipsCount')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsCount')
->label('Slider')
->pips(PipsMode::Count)
->pipsValues(5)
->default(50),
]),
Group::make()
->id('sliderPipsValues')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsValues')
->label('Slider')
->pips(PipsMode::Values)
->pipsValues([5, 15, 25, 35, 45, 55, 65, 75, 85, 95])
->default(50),
]),
Group::make()
->id('sliderPipsValuesDensity')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsValuesDensity')
->label('Slider')
->pips(PipsMode::Values, density: 5)
->pipsValues([5, 15, 25, 35, 45, 55, 65, 75, 85, 95])
->default(50),
]),
Group::make()
->id('sliderPipsFilter')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderPipsFilter')
->label('Slider')
->pips(density: 5)
->pipsFilter(RawJs::make(<<<'JS'
($value % 50) === 0
? 1
: ($value % 10) === 0
? 2
: ($value % 25) === 0
? 0
: -1
JS))
->default(50),
]),
Group::make()
->id('sliderNonLinear')
->extraAttributes([
'class' => 'p-16 max-w-xl',
])
->schema([
Slider::make('sliderNonLinear')
->label('Slider')
->nonLinearPoints(['20%' => 50, '50%' => 75])
->pips()
->default(50),
]),
]);
}

Expand Down
Loading