.blue-slide {
    width: 210px;
    height: 50px;
    cursor: pointer;
}

.blue-slide,
.blue-slide::-webkit-slider-runnable-track,
.blue-slide::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.blue-slide::-webkit-slider-runnable-track {
    width: 200px;
    height: 5px;
    background: linear-gradient(to right, #100271, #100271), #dadada;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
}

.blue-slide::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    margin-top: -5px;
    background: #f5f8ff;
    border-radius: 50%;
    border: 2px solid #939393;
}


/*IE*/

.blue-slide::-ms-track {
    width: 300px;
    height: 5px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

.blue-slide::-ms-fill-lower {
    background: #e2e8ed;
    border-radius: 10px;
}

.blue-slide::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}

.blue-slide::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #f5f8ff;
}

.blue-slide:focus::-ms-fill-lower {
    background: #326E9F;
}

.blue-slide:focus::-ms-fill-upper {
    background: #ccc;
}


/*FF*/

.blue-slide {
    border: 1px solid white;
    width: 100%;
}

.blue-slide::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

.blue-slide::-moz-range-thumb {
    border: 1px solid #e5eaee;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #f5f8ff;
    border: 2px solid #939393;
}

.blue-slide:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

.blue-slide:focus::-moz-range-track {
    background: #ccc;
}

.blue-slide::-moz-range-progress {
    background: #326E9F;
    border-radius: 10px;
}