HTML垂直滑块元素

希望快速 - 为什么我的滑块元素不能垂直定向？我错过了什么？HTML垂直滑块元素

谢谢！

CSS

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

HTML

<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>

来源

2017-04-21 Deborah

显示我的代码比我会检查？ –

嗨Lalit，代码包含在我原来的问题。这不是关于滑块功能（工作正常），只是方向。谢谢！ – Deborah

试试这个：

#CRHslider1 { 
    -webkit-appearance: slider-vertical; 
    data-orientation="vertical"; 
}

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

的jsfiddle：https://jsfiddle.net/david_black/3jot0pvx/

你的CSS不工作的原因是因为它匹配div而不是输入。

来源

2017-04-21 10:41:41

嗨大卫，谢谢你的回答，但我恐怕我不明白？我有两个滑块存储在单独的div - 如果我更改CSS，因此它不引用div，我如何区分它们？我可以引用滑块ID并以这种方式定位它们吗？谢谢！ – Deborah

是的，您可以将ID分配给两个滑块。那肯定会奏效。 –

太好了，谢谢！ – Deborah

HTML垂直滑块元素

回答

相关问题