如何自定义垂直输入范围

Question

我正在关注this 教程来自定义垂直输入范围，但我不知道如何使用垂直输入达到相同的结果。

我尝试添加transform: rotate(270deg); 规则，但没有帮助。

jsfiddle

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 5px;
    
    /* transform: rotate(270deg); */
}
input[type=range]::-webkit-slider-runnable-track {
    width: 5px;
    height: 300px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

<input type="range">

Answer 1

您可以做的只是使用教程中的相同代码，然后将transform:rotate(90deg); 和transform-origin: left; 添加到input[type=range] 以垂直旋转它。