input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    height: 32px;
}

// For some reason doesn't work when put inside of the above styling
// Also doesn't work when using both webkit and moz selectors together
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    height: 8px;
    box-shadow: var(--shadow-inner-4);
}
input[type="range"]::-moz-range-track {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    height: 8px;
    box-shadow: var(--shadow-inner-4);
}

input[type="range"]::-webkit-slider-thumb{
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 18 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='12' height='24' fill='%23C3C3C3'/%3E%3Crect width='16' height='2' fill='white'/%3E%3Crect x='16' width='2' height='24' fill='black'/%3E%3Crect x='14' y='24' width='2' height='2' fill='black'/%3E%3Crect x='12' y='26' width='2' height='2' fill='black'/%3E%3Crect x='10' y='28' width='2' height='2' fill='black'/%3E%3Crect x='8' y='30' width='2' height='2' fill='black'/%3E%3Crect x='6' y='26' width='2' height='4' fill='white'/%3E%3Crect x='8' y='26' width='2' height='4' fill='%23808080'/%3E%3Crect x='10' y='24' width='2' height='4' fill='%23808080'/%3E%3Crect x='12' y='22' width='2' height='4' fill='%23808080'/%3E%3Crect x='14' y='2' width='2' height='22' fill='%23808080'/%3E%3Crect x='4' y='24' width='2' height='4' fill='white'/%3E%3Crect x='2' y='22' width='2' height='4' fill='white'/%3E%3Crect y='2' width='2' height='22' fill='white'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 32px;
    margin-top: -12px;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb{
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='32' viewBox='0 0 18 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='12' height='24' fill='%23C3C3C3'/%3E%3Crect width='16' height='2' fill='white'/%3E%3Crect x='16' width='2' height='24' fill='black'/%3E%3Crect x='14' y='24' width='2' height='2' fill='black'/%3E%3Crect x='12' y='26' width='2' height='2' fill='black'/%3E%3Crect x='10' y='28' width='2' height='2' fill='black'/%3E%3Crect x='8' y='30' width='2' height='2' fill='black'/%3E%3Crect x='6' y='26' width='2' height='4' fill='white'/%3E%3Crect x='8' y='26' width='2' height='4' fill='%23808080'/%3E%3Crect x='10' y='24' width='2' height='4' fill='%23808080'/%3E%3Crect x='12' y='22' width='2' height='4' fill='%23808080'/%3E%3Crect x='14' y='2' width='2' height='22' fill='%23808080'/%3E%3Crect x='4' y='24' width='2' height='4' fill='white'/%3E%3Crect x='2' y='22' width='2' height='4' fill='white'/%3E%3Crect y='2' width='2' height='22' fill='white'/%3E%3C/svg%3E%0A");
    width: 18px;
    height: 32px;
    margin-top: -12px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}