.label-toggle-plan::before {
    text-transform: capitalize;
    content: var(--monthly);
}
.label-toggle-plan::after {
    text-transform: capitalize;
    content: var(--yearly);
}

input[type=range]::-webkit-slider-thumb {
    background-color: #5d4d83;
}
input[type=range]::-moz-range-thumb {
    background-color: #5d4d83;
}
input[type=range]::-ms-thumb {
    background-color: #5d4d83;
}

input[type=range] + .thumb {
    background-color: #dedede;
    overflow: hidden;
}
input[type=range] + .thumb.active .value {
    color: #5d4d83;
}