@php
    $sliderName ??= 'defaultSlider';
    $testName ??= 'testSlider';
    $minValue ??= 0;
    $maxValue ??= 10;
    $defaultValue ??= 0;
    $useEmoji ??= false;
    $minEmoji ??= '😒';
    $maxEmoji ??= '😃';
    $withCounter ??= true;
@endphp

<div style="display: flex; width: 90%; flex-direction: column; align-items: center;">
    <div>{{ $testName }}</div>
    @if($withCounter)
        <div class="page-title" style="margin: 5px 0 0 0;" id="{{$sliderName}}-val">{{$defaultValue}}</div>
    @endif
    <div class="slider-wrapper field" style="padding:35px 0; width: 100%;">
        <span>
            @if ($useEmoji)
                <span>{{ $minEmoji }}</span>
            @else
                <span>{{ $minValue }}</span>
            @endif
        </span>
        <div class="slider" id="{{ $sliderName }}-slider">
            <input name="{{ $sliderName }}" type="range" min="{{ $minValue }}" max="{{ $maxValue }}" value="{{ $defaultValue }}" class="slider__input">
            <div class="slider-selector">
                <div class="slider-selector__btn"></div>
            </div>
            <div class="slider-indicator"></div>
        </div>
        <span>
            @if ($useEmoji)
                <span>{{ $maxEmoji }}</span>
            @else
                <span>{{ $maxValue }}</span>
            @endif
        </span>
    </div>
</div>

@if($withCounter)
    <script>
        $('input[name={{ $sliderName }}]').on('input', (event) => {
            const val = $(event.target).val();
            $('#{{ $sliderName }}-val').text(val).trigger('change');
        });
    </script>
@endif