Como exibir um controle deslizante de entrada de intervalo verticalmente

Eu gostaria de exibir um <input type="range" />controle deslizante verticalmente. Estou preocupado apenas com navegadores que suportam o controle deslizante de intervalo.

Eu encontrei alguns comentários e referências que parecem indicar que definir a altura maior do que a largura fará com que o navegador mude a orientação automaticamente, mas em meus testes, isso só funciona no Opera costumava funcionar no Opera, mas não funciona mais. Como posso orientar um controle deslizante de intervalo HTML5 verticalmente?

Primeiro, defina a altura maior do que a largura. Em teoria, isso é tudo de que você precisa. A especificação HTML5 sugere o mesmo :

... o UA determinou a orientação do controle a partir da proporção das propriedades de altura e largura especificadas na folha de estilo.

O Opera o implementou dessa forma, mas agora está usando o WebKit Blink . A partir de hoje, nenhum navegador implementa um controle deslizante vertical baseado apenas na altura sendo maior do que a largura.

Independentemente disso, é necessário definir a altura maior do que a largura para obter o layout correto entre os navegadores. Aplicar o preenchimento esquerdo e direito também ajudará no layout e no posicionamento.

Para Chrome, use -webkit-appearance: slider-vertical.

Para o IE, use writing-mode: bt-lr.

Para Firefox, adicione um orient="vertical"atributo ao html. Pena que eles fizeram assim. Os estilos visuais devem ser controlados via CSS, não HTML.

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

Isenção de responsabilidade:

Esta solução é baseada em implementações de navegador atuais de propriedades CSS ainda indefinidas ou não finalizadas. Se você pretende usá-lo em seu código, esteja preparado para fazer ajustes no código à medida que novas versões do navegador são lançadas e as recomendações do w3c são concluídas.

MDN contém um aviso explícito contra o uso -webkit-appearancena web:

Não use esta propriedade em sites da Web: além de não ser padrão, seu comportamento muda de um navegador para outro. Mesmo a palavra none- chave não tem o mesmo comportamento em cada elemento do formulário em navegadores diferentes, e alguns não têm suporte para isso.

A legenda para a demonstração do controle deslizante vertical na documentação do IE indica erroneamente que definir uma altura maior do que a largura exibirá um controle deslizante verticalmente, mas isso não funciona. Na seção de código , ele claramente não define a altura ou largura e, em vez disso, usa writing-mode. A writing-modepropriedade, conforme implementada pelo IE , é muito robusta. Infelizmente, os valores definidos no rascunho de trabalho atual das especificações no momento da redação deste artigo são muito mais limitados. Se as versões futuras do IE abandonarem o suporte de bt-lrem favor da proposta atualmente vertical-lr(que seria o equivalente a tb-lr), o controle deslizante será exibido de cabeça para baixo. Muito provavelmente, as versões futuras estenderiam owriting-modepara aceitar novos valores em vez de descartar o suporte para valores existentes. Mas é bom saber com o que você está lidando.

Você pode fazer isso com as transformações css, mas tome cuidado com a altura / largura do contêiner. Também pode ser necessário posicioná-lo mais baixo:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

ou o equivalente da transformação 3d:

input[type="range"] {
   transform: rotateZ(270deg);
}

Você também pode usar isso para mudar a direção do slide, definindo-o para 180 graus ou 90 graus para horizontal ou vertical, respectivamente.

Sem alterar a posição para absoluta, veja abaixo. Isso também suporta todos os navegadores recentes.

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

para browsers muito antigos, você pode usar -sand-transform: rotate(10deg);a partir de lixa CSS

ou usar

seletor de prefixo, como -ms-transform: rotate(270deg);para IE9

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

Fonte: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

É muito simples. Implementei usando -webkit-appearance: slider-vertical, Funcionou em chorme, Firefox, Edge

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}