HTML垂直滑块元素

希望是一个快速的-为什么我的滑块元素没有垂直方向？我错过了什么

谢谢大家!

CSS

HTML

控制棒高度


0%  100%

试试这个：

#CRHslider1{
-webkit外观：滑块垂直；
数据方向=“垂直”；
}

控制棒高度


0%  100%

JSFiddle：

---

css不起作用的原因是它匹配的是div而不是输入。

显示代码，然后我再检查？嗨，Lalit，代码包含在我的原始问题中。这不是关于滑块功能（工作正常），只是方向。非常感谢。你好，大卫，谢谢你的回答，但我恐怕不明白？我有两个滑块存储在不同的div中-如果我更改CSS使其不引用div，我如何区分它们？我可以引用一个滑块id并以这种方式定位它们吗？非常感谢。是的，您可以为两个滑块分配ID。这肯定会奏效。

div.CRHslider{
-webkit-appearance: slider-vertical;
    data-orientation="vertical";
}

<div id="CRHslider">
Control Rod Height
<br>
0% <input type="range" name="ControlRodHeight" min="0" max="100" value="0" 
onchange="updateCRHSlider(this.value)" class="vertical" orient="vertical"/> 100%
</div>