样式化垂直HTML5范围输入

Question

我正在尝试设置垂直范围输入的样式，这就是我所拥有的：

input[type='range'] {
    -webkit-appearance: slider-vertical;
    background-color: #ccc;
    height: 158px;
    width: 2px;
    margin: 8px auto;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 20px;
    background-color: #3ebede;
    height: 30px;
    width: 30px;
}

但似乎因为我有' -webkit-appearance：slider-vertical; '使其垂直， 样式不适用。

有没有办法在没有变换/插件的情况下设置垂直范围的样式......？

注意：我只需要它在Chrome上运行

更新 这是我的JSFiddle。