PHP code example of jaysontemporas / filament-nouislider

1. Go to this page and download the library: Download jaysontemporas/filament-nouislider library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

jaysontemporas / filament-nouislider example snippets


use JaysonTemporas\FilamentNoUiSlider\Forms\Components\NoUiSlider;

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


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


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

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


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

    return $data;
}


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,
    ])


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,
    ]),


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


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