.custom-slider {
    width: 100%;
    padding-left: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.custom-slider:focus {
    outline: 0
}

.custom-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(13, 91, 214, .25);
}

.custom-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(13, 91, 214, .25);
}

.custom-slider:focus::-ms-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(13, 91, 214, .25);
}

.custom-slider::-moz-focus-outer {
    border: 0
}

.custom-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -4px;
    border: 0;
    background-color: #0D5BD6;
    border-radius: 16px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none
}

@media screen and (prefers-reduced-motion: reduce) {
    .custom-slider::-webkit-slider-thumb {
        transition: none
    }
}

.custom-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    color: transparent;
    cursor: pointer;
    background: rgba(13, 91, 214, 0.15);
    border-color: transparent;
    border-radius: 16px;
}

.custom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #0D5BD6;
    border: 0;
    border-radius: 16px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -moz-appearance: none;
    appearance: none
}

@media screen and (prefers-reduced-motion: reduce) {
    .custom-slider::-moz-range-thumb {
        transition: none
    }
}


.custom-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    color: transparent;
    cursor: pointer;
    background: rgba(13, 91, 214, 0.15);
    border-color: transparent;
    border-radius: 16px
}

.custom-slider::-ms-thumb {
    width: 16px;
    height: 16px;
    margin-top: 0;
    margin-right: 3px;
    margin-left: 3px;
    background-color: #0D5BD6;
    border: 0;
    border-radius: 16px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    appearance: none
}

@media screen and (prefers-reduced-motion: reduce) {
    .custom-slider::-ms-thumb {
        transition: none
    }
}

.custom-slider::-ms-track {
    width: 100%;
    height: 8px;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 8px
}

/*进度条已填充部分*/
.custom-slider::-ms-fill-lower {
    background: red !important;
    border-radius: 16px
}

.custom-slider::-ms-fill-upper {
    margin-right: 15px;
    background: rgba(13, 91, 214, 0.15);
    border-radius: 16px
}

.custom-slider::-moz-range-progress {
    background: linear-gradient(to right, #059CFA, white 100%, white);
}