.range-wrapper {
    .range-slider {
        position: relative;
        width: 100%;

        input[type='range'] {
            pointer-events: none;
            -webkit-appearance: none;
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: transparent;
            cursor: pointer;

            &:focus {
                outline: 0;
            }

            &::-webkit-slider-runnable-track {
                width: 100%;
                height: 4px;
                cursor: pointer;
                background-color: $grey;
                ;
                border: 0;
                border-radius: 2px;
            }

            &::-webkit-slider-thumb {
                position: relative;
                pointer-events: all;
                border: $range-thumb-border;
                width: $range-thumb-width;
                height: $range-thumb-width;
                border-radius: 50%;
                background: $range-thumb-bg;
                box-shadow: $range-thumb-box-shadow;
                cursor: pointer;
                -webkit-appearance: none;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;

                &:hover {
                    background: $grey;
                    border-color: $grey;
                }
            }
        }
    }
}