How to display a range input slider vertically

Question

I would like to display an  lt input type  range    gt  slider control vertically   I m only concerned with browsers that support the range slider control   I ve found some comments and references that seem to indicate that setting the height greater than the width will cause the browser to change the orientation automatically  but in my testing  that only works in Opera used to work in Opera  but not anymore   How can I orient an HTML5 range slider vertically

User · Answer

x000D   x000D   container   x000D      border  3px solid  eee  x000D      margin  10px  x000D      padding  10px  x000D      float  left  x000D      text-align  center  x000D      max-width  20  x000D    x000D   x000D  input type range  range   x000D      cursor  pointer  x000D      width  100px  important  x000D      -webkit-appearance  none  x000D      z-index  200  x000D      width  50px  x000D      border  1px solid  e6e6e6  x000D      background-color   e6e6e6  x000D      background-image  -webkit-gradient linear  0 0  0 100   from  e6e6e6   to  d2d2d2    x000D      background-image  -webkit-linear-gradient right   e6e6e6   d2d2d2   x000D      background-image  -moz-linear-gradient right   e6e6e6   d2d2d2   x000D      background-image  -ms-linear-gradient right   e6e6e6   d2d2d2   x000D      background-image  -o-linear-gradient right   e6e6e6   d2d2d2  x000D    x000D   x000D  input type range  range focus   x000D      border  0  important  x000D      outline  0  important x000D    x000D   x000D  input type range  range  -webkit-slider-thumb   x000D      -webkit-appearance  none  x000D      width  10px  x000D      height  10px  x000D      background-color   555  x000D      background-image  -webkit-gradient linear  0 0  0 100   from  4ddbff   to  0cf    x000D      background-image  -webkit-linear-gradient right   4ddbff   0cf   x000D      background-image  -moz-linear-gradient right   4ddbff   0cf   x000D      background-image  -ms-linear-gradient right   4ddbff   0cf   x000D      background-image  -o-linear-gradient right   4ddbff   0cf  x000D    x000D   x000D  input type range  round   x000D      -webkit-border-radius  20px  x000D      -moz-border-radius  20px  x000D      border-radius  20px x000D    x000D   x000D  input type range  round  -webkit-slider-thumb   x000D      -webkit-border-radius  5px  x000D      -moz-border-radius  5px  x000D      -o-border-radius  5px x000D    x000D   x000D   vertical-lowest-first   x000D      -webkit-transform  rotate 90deg   x000D      -moz-transform  rotate 90deg   x000D      -o-transform  rotate 90deg   x000D      -ms-transform  rotate 90deg   x000D      transform  rotate 90deg  x000D    x000D   x000D   vertical-heighest-first   x000D      -webkit-transform  rotate 270deg   x000D      -moz-transform  rotate 270deg   x000D      -o-transform  rotate 270deg   x000D      -ms-transform  rotate 270deg   x000D      transform  rotate 270deg  x000D    x000D   lt div class  container  style  margin-left  0px  gt  x000D       lt br gt  lt br gt  x000D       lt input class  range vertical-lowest-first  type  range  min  0  max  1  step  0 1  value  1  gt  x000D       lt br gt  lt br gt  lt br gt  x000D   lt  div gt  x000D   x000D   lt div class  container  gt  x000D       lt br gt  lt br gt  x000D       lt input class  range vertical-heighest-first  type  range  min  0  max  1  step  0 1  value  1  gt  x000D       lt br gt  lt br gt  lt br gt  x000D   lt  div gt  x000D   x000D   x000D   lt div class  container  gt  x000D       lt br gt  lt br gt  x000D       lt input class  range vertical-lowest-first round  type  range  min  0  max  1  step  0 1  value  1  gt  x000D       lt br gt  lt br gt  lt br gt  x000D   lt  div gt  x000D   x000D   x000D   lt div class  container  style  margin-right  0px  gt  x000D       lt br gt  lt br gt  x000D       lt input class  range vertical-heighest-first round  type  range  min  0  max  1  step  0 1  value  1  gt  x000D       lt br gt  lt br gt  lt br gt  x000D   lt  div gt  x000D   x000D   x000D    Source  http   twiggle-web-design com tutorials Custom-Vertical-Input-Range-CSS3 html

User · Answer

Its very simple  I had implemented using -webkit-appearance  slider-vertical  It worked in chorme  Firefox  Edge  lt input type  quot range quot  gt   input type range       writing-mode  bt-lr     IE        -webkit-appearance  slider-vertical     WebKit        width  50px      height  200px      padding  0 24px      outline  none      background transparent

User · Answer

First  set height greater than width   In theory  this is all you should need  The HTML5 Spec suggests as much       the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties   Opera had it implemented this way  but Opera is now using WebKit Blink   As of today  no browser implements a vertical slider based solely on height being greater than width  Regardless  setting height greater than width is needed to get the layout right between browsers   Applying left and right padding will also help with layout and positioning  For Chrome  use -webkit-appearance  slider-vertical  For IE  use writing-mode  bt-lr  For Firefox  add an orient  quot vertical quot  attribute to the html  Pity that they did it this way   Visual styles should be controlled via CSS  not HTML   x000D   x000D  input type range  orient vertical        writing-mode  bt-lr     IE        -webkit-appearance  slider-vertical     WebKit        width  8px      height  175px      padding  0 5px    x000D   lt input type  range  orient  vertical    gt  x000D   x000D   x000D    Disclaimers  This solution is based on current browser implementations of as yet undefined or unfinalized CSS properties   If you intend to use it in your code  be prepared to make code adjustments as newer browser versions are released and w3c recommendations are completed  MDN contains an explicit warning against using -webkit-appearance on the web   Do not use this property on Web sites  not only is it non-standard  but its behavior change from one browser to another  Even the keyword none has not the same behavior on each form element on different browsers  and some doesn t support it at all   The caption for the vertical slider demo in the IE documentation erroneously indicates that setting height greater than width will display a range slider vertically  but this does not work  In the code section  it plainly does not set height or width  and instead uses writing-mode   The writing-mode property  as implemented by IE  is very robust   Sadly  the values defined in the current working draft of the spec as of this writing  are much more limited   Should future versions of IE drop support of bt-lr in favor of the currently proposed vertical-lr  which would be the equivalent of tb-lr   the slider would display upside down   Most likely  future versions would extend the writing-mode to accept new values rather than drop support for existing values   But  it s good to know what you are dealing with

User · Answer

x000D   x000D  window onload   function    var slider   document getElementById  sss     var  result   document getElementById  final    slider oninput   function        result innerHTML   slider value       x000D   slider      width  100vw      height  100vh          display  flex      justify-content  center      align-items  center      slider  container-slider      width  600px      display  flex      justify-content  center      align-items  center      transform  rotate 90deg      slider  container-slider input type  range        width  60       -webkit-appearance  none      background-color  blue      height  7px      border-radius  5px       outline  none      margin  0 20px          slider  container-slider input type  range    -webkit-slider-thumb      -webkit-appearance  none      width  40px      height  40px      border-radius  50       background-color  red        slider  container-slider input type  range    -webkit-slider-thumb hover   box-shadow  0px 0px 10px rgba 255 255 255  3               0px 0px 15px rgba 255 255 255  4               0px 0px 20px rgba 255 255 255  5               0px 0px 25px rgba 255 255 255  6               0px 0px 30px rgba 255 255 255  7        slider  container-slider  val       width  60px      height  40px      background-color   ACB6E5      display  flex      justify-content  center      align-items  center      font-family  consolas      font-weight  700      font-size  20px      letter-spacing  1 3px      transform  rotate -90deg      slider  container-slider  val  before      content          position  absolute      width  0      height  0      display  block      border  20px solid transparent      border-bottom-color   ACB6E5      top  -30px    x000D   lt div class  slider  gt     lt div class  container-slider  gt       lt input type  range  min  0  max  100  step  1  value    id  sss  gt       lt div class  val  id  final  gt 0 lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can do this with css transforms  though be careful with container height width  Also you may need to position it lower    x000D   x000D  input type  range     x000D     position  absolute  x000D     top  40   x000D     transform  rotate 270deg   x000D    x000D   lt input type  range   gt  x000D   x000D   x000D      or the 3d transform equivalent   input type  range        transform  rotateZ 270deg       You can also use this to switch the direction of the slide by setting it to 180deg or 90deg for horizontal or vertical respectively

User · Answer

Without changing the position to absolute  see below  This supports all recent browsers as well    x000D   x000D   vranger   x000D    margin-top  50px  x000D     transform  rotate 270deg   x000D    -moz-transform  rotate 270deg     do same for other browsers if required   x000D    x000D   lt input type  range  class  vranger   gt  x000D   x000D   x000D    for very old browsers  you can use -sand-transform  rotate 10deg   from CSS sandpaper  or use  prefix selector such as -ms-transform  rotate 270deg   for IE9

[html] How to display a range input slider vertically

Examples related to html

Examples related to css