input[type="range"] {
    -webkit-appearance: none;
    height: 12px;
    border-radius: 3px;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px 0 #6b728050;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 33px;
    width: 15px;
    border-radius: 10%;
    background: #f3f4f6;
    cursor: pointer;
    box-shadow: 0 0 2px 0 #555;
    transition: background 0.3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 33px;
    width: 15px;
    border-radius: 10%;
    background: #f3f4f6;
    cursor: pointer;
    box-shadow: 0 0 2px 0 #555;
    transition: background 0.3s ease-in-out;
}


input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: #64748b60 0px 0px 0px 3px;
}

input[type="range"]::-moz-range-thumb:hover {
    box-shadow: #64748b60 0px 0px 0px 3px;
}

input[type="range"]::-webkit-slider-thumb:active {
    box-shadow: #64748b50 0px 0px 0px 8px;
    transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    left 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    bottom 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

input[type="range"]::-moz-range-thumb:active {
    box-shadow: #64748b50 0px 0px 0px 8px;
    transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    left 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    bottom 350ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}