HTML Vertical Slider Element

Question

hopefully a quick one - why is my slider element not orientating vertically? What am I missing?

Thank you!

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>

Answer 1

Try this:

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

The reason your css isn't working is because it's matching the div instead of the input.