Livewire で Fomantic-UI の Slider を使うには？slider

ショコラ

Livewire で Fomantic-UI の Slider を使うには？slider

Fomantic-UI の Slider のように、wire:model が使えないコントーラー（text、radio、checkbox、select、textarea以外）を使うには、どうしたらいいのでしょうか？第３弾です。
今回はスライダーに挑戦してみたいと思います。

もっさん先輩

手順

Laravel と Livewire をインストールして、Fomantic-UI の Slider を使う手順。

プロジェクト名（slider）を決めて以下のコマンドを実行します。

curl -s https://laravel.build/slider | bash

インストール時にプロジェクト名のディレクトリが作成されます。

インストールの最後に sudo でパスワードの入力を求められます。

↓下のメッセージが表示されてインストールは終わります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

Get started with: cd slider && ./vendor/bin/sail up

sail のエイリアスを定義します。

echo "alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'" >> ~/.bashrc

source ~/.bashrc

Laravel のインストールはここまで。

「sail up」でコンテナを起動します。

cd slider && sail up -d

ララベルのトップディレクトリで、Livewireパッケージをインストールします。

sail composer require livewire/livewire

次のコマンドを実行して、progressコンポーネントを生成します。

sail artisan make:livewire slider

$ sail artisan make:livewire slider
 COMPONENT CREATED  ?

CLASS: app/Http/Livewire/Slider.php
VIEW:  resources/views/livewire/slider.blade.php

次の 2つのファイルが生成されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Slider extends Component
{
    public function render()
    {
        return view('livewire.slider');
    }
}

<div>
    {{-- If you look to others for fulfillment, you will never truly be fulfilled. --}}
</div>

※因みに、renderメソッドを定義しなくても livewire.slider は呼び出されます。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Slider extends Component
{
}

生成された sliderコンポーネントのクラスとビューを次のように置き換えます。

app/Http/Livewire/Slider.php

<?php
namespace App\Http\Livewire;
class Slider extends \Livewire\Component
{
  public $value = 50;

  public function dehydrate() {
    \Log::debug($this->value);
    $this->emit('create');
  }
}

↑デハイドレートで createメッセージを送信しています。

resources/views/livewire/slider.blade.php

<div class="ui labeled ticked slider {{ $this->id }}"></div>

@push ('create')
Livewire.on('create',() => $('.{{ $this->id }}').slider({
  min: 0,
  max: 100,
  step: 5,
  start: @this.value,
  onChange: value => @this.set('value',value,false),
}))
@endpush

↑コンポーネントの配置と、createメッセージを受信したらスライダーを表示するようにします。

resources/views/index.blade.php ファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.0/dist/semantic.min.js"></script>
    <livewire:styles />
  </head>
  <body>
    <div class="ui basic segment">
      <livewire:slider />
    </div>
    <livewire:scripts />
<script>
document.addEventListener('livewire:load',() => {
  @stack ('create')
  Livewire.emit('create')
})
</script>
  </body>
</html>

↑ライブワイヤーのロード時に、createメッセージを送信してスライダーを表示しています。