.custom-range-slider {
    position: relative;

    $parent: &;
    &__bubble {
        position: absolute;
        bottom: 100%;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        color: $white;
        background-color: rgba(0, 0, 0, 0.75);
        font-size: 12px;
        display: none;
        justify-content: center;
        align-items: center;
        transform: translateX(-5px);

        &:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;

        }
    }

    &__control {
        cursor: pointer;
        &::before {
            content: attr(min);
            position: absolute;
            top: 100%;
            left: 0;
            text-align: left;
            font-size: 12px;
        }
        &::after {
            content: attr(max);
            position: absolute;
            top: 100%;
            right: 0;
            text-align: right;
            font-size: 12px;
        }

        &:hover ~ #{$parent}__bubble {
            display: flex;
        }
    }
    
}