如何显示范围输入滑块垂直

我想显示一个 <input type="range" />滑块控制垂直。我只关心支持范围滑块控制的浏览器。

我发现一些注释和参考似乎表明，设置高度大于宽度将导致浏览器自动改变方向，但在我的测试中，只有 在歌剧院工作曾经在 Opera 中工作，但现在不再是了。我如何定位一个 HTML5范围滑块垂直？

163053 次浏览
小开
最佳答案

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. And now that suggestion is under review by WHATWG.

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="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

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

Disclaimers:

This solution is based on current browser implementations of as yet still 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 WHATWG recommendations are completed. Subscribe to this github issue to get updates when they finally decide on a CSS attribute to officially control slide orientation.

MDN contains a warning about using -webkit-appearance on the web:

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Despite these warnings, this answer is now nearly 9 years old, and the advice remains largely unchanged.

小开

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"] {
position: absolute;
top: 40%;
transform: rotate(270deg);
}
<input type="range"/>

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.

小开

Without changing the position to absolute, see below. This supports all recent browsers as well.

.vranger {
margin-top: 50px;
transform: rotate(270deg);
-moz-transform: rotate(270deg); /*do same for other browsers if required*/
}
<input type="range" class="vranger"/>

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 {
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>

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

小开

Its very simple. I had implemented using -webkit-appearance: slider-vertical, It worked in chrome, 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 ;
}
}
.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;
}
<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>

小开

Slider Color Picker

Thie color picker has two modes — HSBA and RGBA. Sliders control the Hue, Saturation, Brightness, or the Red, Green, and Blue values of the color along with the Alpha value (opacity).

Installation

This color picker is shipped as an ES Module. You can add it to your project via npm

npm install --save slider-color-picker

Or load the ES module directly

<script type="module" src="https://unpkg.com/slider-color-picker"></script>

Usage

Simply add the slider-color-picker element in your HTML. This element accepts a value attribute to set the value of the color. The values can be HEX, HEX with Alpha, RGB, RGBA, HSL, HSLA

<slider-color-picker><slider-color-picker>


// RGB sliders with some initial value
<slider-color-picker mode="rgba" value="#FF55A7"><slider-color-picker>

Demo


提交答案