input range vertical

by jkeyes

CSS

#vertical_slider
{
  float: left;
  width: 40px;
  height: 218px;
  border: 1px solid blue;
  position: relative;
}

#vertical_slider input {
  width: 80px;
  position: absolute;
  bottom: 50%;
  left: -20px;
}

JavaScript

var vertical_slider = document.createElement('div');
									vertical_slider.id = 'vertical_slider';

var osa_y_panorama = 0.6;
var range_pitch = document.createElement("input");
									range_pitch.setAttribute("type", "range");
									range_pitch.style.webkitTransform = "rotate(90deg)";
									range_pitch.style.mozTransform = "rotate(90deg)";
									range_pitch.style.oTransform = "rotate(90deg)";
									range_pitch.style.msTransform = "rotate(90deg)";
									range_pitch.style.transform = "rotate(90deg)";
									range_pitch.min = "0";
									range_pitch.max = "218";
									range_pitch.step = "0.6";
									range_pitch.defaultValue = osa_y_panorama;
                
                  
vertical_slider.appendChild( range_pitch );
document.body.appendChild( vertical_slider );