@switch (sliderTemplate) {
    @case ('commission') {
        <div
            class="ta-ngx-slider custom-slider-commission {{ customClass }}"
            [ngClass]="{ disabled: isDisabled }"
        >
            <p class="custom-slider-text">{{ sliderName }}</p>
            <ngx-slider
                #slider
                [options]="sliderOptions"
                [(value)]="startedValue"
                (userChangeEnd)="userChangeEnd($event)"
            >
            </ngx-slider>
        </div>
    }
    @case ('logo-change') {
        <div class="ta-ngx-slider custom-slider-logo-change {{ customClass }}">
            <ngx-slider
                #slider
                [options]="sliderOptions"
                [(value)]="startedValue"
                (valueChange)="valueChange($event)"
            >
            </ngx-slider>
        </div>
    }
    @case ('hos-change') {
        <ngx-slider
            #slider
            [options]="sliderOptions"
            [(value)]="startedValue"
            (userChangeEnd)="userChangeEnd($event)"
        >
        </ngx-slider>
    }
    @case ('range-slider') {
        <div class="range-slider-holder">
            <div
                class="ta-ngx-slider custom-slider-commission {{ customClass }}"
            >
                <ngx-slider
                    #slider
                    [(value)]="minValue"
                    [(highValue)]="maxValue"
                    [options]="sliderOptions"
                    (valueChange)="minValueChange($event)"
                    (highValueChange)="highValueChange($event)"
                >
                </ngx-slider>
            </div>
        </div>
    }
}