我正在尝试用幻灯片创建一个前/后图像。我创建一个输入范围，并用CSS自定义它。

它在Firefox上工作得很好，但当我使用Chrome时，幻灯片就消失了。如果我将“.compare input：：-webkit-slider-thumb”的高度更改为450px，幻灯片将出现。在Firefox上，它与高度的关系很好:.

如何将Chrome上的高度也设置为动态的？

滑块的CSS代码:

'''

.compare input{
    position: absolute;
    top:0px;
    left: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    z-index:3;
    width: ;
    height: ;
    background: transparent;
    padding: 0 !important;
}
.compare input::-webkit-slider-thumb{
    -webkit-appearance: none;
    display: block;
    width: 5px;
    height: ;
    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: ;
    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;
}

'' （我试图创建的图像上载于:https://belabelinda.com/a/pf_preview？id=2acc4637-6ee7-40a8-b61e-68fcd010131b)

顺晟科技：