-webkit-slider-thumb height not working properly on Chrome

I'm trying to create a before/after image with slides. I created an input range and customize it with CSS.

It's working just perfectly on Firefox, but when I use Chrome the slide just disappears. If I change the height on ".compare input::-webkit-slider-thumb" to 450px, the slide appears. On Firefox it works just fine with height:100%.

How could I set the height on Chrome to be dynamic too?

The CSS code for the slider:

'''

.compare input{
    position: absolute;
    top:0px;
    left: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    z-index:3;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 0 !important;
}
.compare input::-webkit-slider-thumb{
    -webkit-appearance: none;
    display: block;
    width: 5px;
    height: 100%;
    border: 1px solid black;
    background: white;
    cursor:pointer;
  
}
.compare input::-webkit-slider-thumb:active{
    background: white;
    border: 1px solid black;
    transition: all 300ms ease-in-out;
}

.compare input::-moz-range-thumb{
    -moz-appearance: none;
    display: block;
    width: 5px;
    height: 100%;
    border: 1px solid black;
    background: white;
    cursor:pointer;
    
}

.compare input::-moz-range-thumb:active{
    background: white;
    border: 1px solid black;
    transition: all 300ms ease-in-out;
}

''' (The image that I'm trying to create is uploaded on: https://belabelinda.com/a/pf_preview?id=2acc4637-6ee7-40a8-b61e-68fcd010131b)