Custom input range on vertical Orientation issue

Question

I have tried to create Customized Slider with Vertical Orientation using the following ways,

• http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html
• <input type="range"> style not applies to thumb when it is vertical

But while applying rotation, if i change width to 100%, then control in centered to page. I would like to render Input type range control with vertical orientation in the wherever i want to render in the page.

Answer 1

Answering the last part of your question (i.e. position vertical oriented range wherever you want): use parent container with display: flex property set.

.range-container {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 200px;
  
  background: #a3e5c1;
}

.range {
  width: 100px;

  transform: rotate(-90deg);
}

<div class="range-container">
  <input class="range" type="range">
</div>

The problem with this method is that if the parent container height needs to be responsive (so it's smaller for a smaller viewport), you may not be able to achieve bindings of the range's width and parent's height with CSS only.