.rangeslider,
.rangeslider__fill {
    display: block;
    border-radius: 10px;
}

.rangeslider {
    background: #F2F2F2;
    position: relative;
}

.rangeslider--horizontal {
    height: 5px;
    width: 100%;
}


.rangeslider--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
}

.rangeslider__fill {
    background: #5f64eb;
    position: absolute;
    transition: 0.3s;
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%;
}

.rangeslider__handle {
    background: #7E6BE3;
    border: 5px solid #F1F1F1;
    cursor: pointer;
    display: inline-block;
    width: 26px;
    height: 26px;
    position: absolute;
    background-size: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.rangeslider--horizontal .rangeslider__handle {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: 0.3s;
}