input=range 创建竖直滑块

突然收到需求需要做竖直滑块，在网上查了多种方法都行不通（比如orient=vertical）,解决方法如下：

//核心修改代码
input[type=range] {

    -webkit-appearance: slider-vertical;   

}
//修改相应样式
input[type=range]::-webkit-slider-runnable-track{

    -webkit-appearance: none;/*清除系统默认样式*/

    width: 16px;/*拖动块宽度*/

    background: #cccccc;/*拖动块背景*/

}

 

修改变成以下样式

然而中间的拖动块样式修改不生效，请各位指教~