.range-slide {
    width: 100%;

    &__input {
        position: relative;
        display: flex;
        align-items: center;
        height: 8px;
        width: 100%;
        overflow: visible;
        cursor: pointer;
        touch-action: none;
        background-color: var(--gray-200);

        &:focus {
            outline: 0;

            .thumb {
                box-shadow: 0 0 0 .3em rgba(255, 162, 0, .2)
            }
        }

        &:before {
            content: "";
            display: block;
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: linear-gradient(var(--warning), var(--warning)) 0/var(--value-percent,0) 100% no-repeat var(--gray-200)
        }

        &.touch-active .thumb-wrapper .thumb {
            box-shadow: none;
            transform: scale(1.5)
        }
    }

    .thumb {
        background-color: var(--warning);
        border-radius: 50%;
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: calc(8px / 2 - 16px / 2);
        left: var(--value-percent, 0);
        margin-left: calc(16px / 2 * -1);
        transition: transform .2s ease;
        will-change: transform;
        pointer-events: none
    }
}