设置垂直范围滑块的样式

Question

如何使范围滑块垂直，并为滑块或至少使其拇指和可运行轨道设置样式？

我在CSS的滑块上使用了-webkit-appearance: slider-vertical;，并试图使用svg图像作为拇指。

<input type="range" />

input[type=range]{
    -webkit-appearance: slider-vertical;
    background-color:black;
}


input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 10px;
    width: 16px;
    border-radius: 50%;
    background-image: url("https://image.flaticon.com/icons/svg/481/481486.svg");
    margin-top: -4px;
} 

但是它没有用。要设置滑块的样式，其-webkit-appearance必须设置为none。但是我记得您可以设置slider-runnable-track的样式，即使滑块的-webkit-appearance未设置为none也是如此。我尝试过transform: rotate(270deg)，但在网格中放置滑块时遇到很多问题。