extension.css

.slidercontainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.slider {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    background: transparent;
    /* Otherwise white in Chrome */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -14px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    /* Add cool effects to your sliders! */
}

.slider:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}


/* 
.slider:focus::-webkit-slider-runnable-track {
    background: #367ebd;
} */