<div class="facet-range">
    <div class="accordion" [id]="'range-facet' + facetId">
        <div class="card">
            <div class="card-header" [id]="facetName">
                <a class="toggler" data-toggle="collapse" [href]="'#range-' + facetId" role="button" aria-expanded="true" [attr.aria-controls]="'range' + facetId">
                    <div>
                        <span class="mr-2">{{facetName | uppercase}}</span>
                        <span [innerHTML]="'['+ facet.properties.symbol + ']'">[]</span>
                    </div>
                    <i class="closed icon-chevronUp"></i>
                    <i class="open icon-chevronDown"></i>
                </a>
            </div>
            <div class="collapse show" [id]="'range-' + facetId" [attr.aria-labelledby]="facetName" [attr.data-parent]="'#range-facet' + facetId">
                <div class="card-body range-info">
                    <div class="current-range">
                        <span>{{ facet.properties.selectedLower || min }}</span>
                        <span>-</span>
                        <span>{{ facet.properties.selectedUpper || max }} {{facet.properties.unit}}</span>
                    </div>
            
                    <span class="edit-range" (click)="openModal(range)">{{ editLabel | uppercase }}</span>
                </div>
            </div>
        </div>
    </div>

    <ng-template #range let-modal>
        <div class="modal-header">
            <h4 class="modal-title">{{facetName}}</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <input ngbAutofocus type="number" class="range-input" [formControl]="minInput" (blur)="minUpdate()" (keyup.enter)="applyFilter()">
            <p>-</p>
            <input type="number" class="range-input" [formControl]="maxInput" (blur)="maxUpdate()" (keyup.enter)="applyFilter()">
        </div>
        <div class="modal-footer">
            <p (click)="switchFilter(exact)">{{exactFilterLabel}} <i class="icon-chevronLarge-next"></i></p>
            <div class="apply-filter" (click)="applyFilter()">{{applyLabel | uppercase}}</div>
        </div>
    </ng-template>

    <ng-template #exact let-modal>
        <div class="modal-header">
            <h4 class="modal-title">{{facetName}}</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <input ngbAutofocus type="number" class="range-input" [formControl]="exactInput" (blur)="minUpdate()" (keyup.enter)="applyExactFilter()">
        </div>
        <div class="modal-footer">
            <p (click)="switchFilter(range)">{{rangerFilterLabel}} <i class="icon-chevronLarge-next"></i></p>
            <div class="apply-filter" (click)="applyExactFilter()">{{applyLabel | uppercase}}</div>
        </div>
    </ng-template>

</div>

./facet-range.component.scss

@import "src/app/styles/helpers";

.facet-range {
    margin-bottom: calc-rem(2);
    color: white;
    background-color: $cool-grey;
    
    .card {
        background-color: inherit;
        border: none;

        &-header {
            border: none;
            background: transparent;
            padding: calc-rem(20);

            .toggler {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: $light-blue;
                @include font-scale(14, uppercase);
                letter-spacing: calc-rem(2);

                &:hover { text-decoration: none; }

                i { @include font-size(8); }

                &[aria-expanded=true] .open {
                    display: none;
                }
                &[aria-expanded=false] .closed {
                    display: none;
                }
            }
        }

        &-body {
            padding-top: calc-rem(10);
            
            &.range-info {
                color: white;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
        
                .current-range {
                    span {
                        margin-right: calc-rem(5);
                    }
                }
        
                .edit-range {
                    color: $light-blue;
                    cursor: pointer;
                    @include font-size(14);
                    letter-spacing: calc-rem(0.4);
                }
            }
        }
    }
}

::ng-deep .modal-content {
    z-index: 9999;
}

::ng-deep .modal-body {
    display: flex;
    flex-direction: column;

    .range-input {
        -moz-appearance: textfield;
        
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    p { text-align: center; }
}

::ng-deep .modal-footer {
    display: flex;
    flex-direction: column;

    p {
        cursor: pointer;

        &:hover {
            color: $cool-grey;
        }
    }

    .apply-filter {
        padding: 10px 0;
        width: 100%;
        text-align: center;
        color: white;
        background-color: $green;
        cursor: pointer;
    }
}