:root {
    --slider-radius: 2px;
}

input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: saddlebrown;
    background: none;
    border-radius: var(--slider-radius);
    height: 15px;
    overflow: hidden;
}

input[type="range"].disabled {
    background: #4CAF50;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
    height: 15px;
    background: #333;
    border-radius: var(--slider-radius);
    box-shadow: 0px -10px 20px 0px #fff;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
    height: 15px;
    background: #333;
    border-radius: var(--slider-radius);
    box-shadow: 0px -10px 20px 0px #fff;
}

 /*Thumb: webkit*/
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 15px;
    width: 15px;
    background-color: #aaa;
    border-radius: 10px;
    border: none;
    box-shadow: -407px 0 0 400px #aaa;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: #aaa;
    border-radius: var(--slider-radius);
    /*border-radius: 0px;*/
    border: none;
    box-shadow: -407px 0 0 400px #555;
}

/* Thumb: Firefox */
input[type="range"]:disabled::-moz-range-thumb {
    opacity: 30%;
    background: #999;
}