I would like to display an <input type="range" />
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?
Without changing the position to absolute, see below. This supports all recent browsers as well.
.vranger {_x000D_
margin-top: 50px;_x000D_
transform: rotate(270deg);_x000D_
-moz-transform: rotate(270deg); /*do same for other browsers if required*/_x000D_
}
_x000D_
<input type="range" class="vranger"/>
_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
.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_
<div class="container" style="margin-left: 0px">_x000D_
<br><br>_x000D_
<input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">_x000D_
<br><br><br>_x000D_
</div>_x000D_
_x000D_
<div class="container">_x000D_
<br><br>_x000D_
<input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">_x000D_
<br><br><br>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="container">_x000D_
<br><br>_x000D_
<input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">_x000D_
<br><br><br>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="container" style="margin-right: 0px">_x000D_
<br><br>_x000D_
<input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">_x000D_
<br><br><br>_x000D_
</div>
_x000D_
Source: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html
You can do this with css transforms, though be careful with container height/width. Also you may need to position it lower:
input[type="range"] {_x000D_
position: absolute;_x000D_
top: 40%;_x000D_
transform: rotate(270deg);_x000D_
}
_x000D_
<input type="range"/>
_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.
Its very simple. I had implemented using -webkit-appearance: slider-vertical
, It worked in 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;
}
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_
<div class="slider">
<div class="container-slider">
<input type="range" min="0" max="100" step="1" value="" id="sss">
<div class="val" id="final">0</div>
</div>
</div>
_x000D_
Source: Stackoverflow.com