@props([
    'name',
    'label' => null,
    'value' => 0,
    'min' => 0,
    'max' => 100,
    'step' => 1,
    'disabled' => false,
    'help' => null,
    'showValue' => false
])

<div class="mb-3">
    @if($label)
        <label for="{{ $name }}" class="form-label">
            {{ $label }}
            @if($showValue)
                <span class="badge bg-secondary ms-2" id="{{ $name }}_value">{{ old($name, $value) }}</span>
            @endif
        </label>
    @endif

    <input 
        type="range"
        name="{{ $name }}"
        id="{{ $name }}"
        class="form-range @error($name) is-invalid @enderror"
        value="{{ old($name, $value) }}"
        min="{{ $min }}"
        max="{{ $max }}"
        step="{{ $step }}"
        @if($disabled) disabled @endif
        @if($showValue) oninput="document.getElementById('{{ $name }}_value').textContent = this.value" @endif
        {{ $attributes }}
    >

    @if($help)
        <div class="form-text">{{ $help }}</div>
    @endif

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>