Question

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

我发现一些注释和引用似乎表明设置高度大于宽度会导致浏览器自动更改方向，但在我的测试中，只有~~在Opera中工作~~以前在Opera工作，但现在不行了。如何垂直定位HTML5范围滑块？

Answer 1

首先，设置高度大于宽度。从理论上讲，这就是你应该需要的。 HTML5 Spec suggests as much：

... UA根据样式表指定的高度和宽度属性的比率确定控件的方向。

Opera以这种方式实现，但Opera现在使用 ~~WebKit~~ Blink。截至今天，没有任何浏览器仅基于高于宽度的高度来实现垂直滑块。

无论如何，需要设置高于宽度的高度才能在浏览器之间进行布局。应用左右填充也有助于布局和定位。

对于Chrome，请使用-webkit-appearance: slider-vertical。

对于IE，请使用writing-mode: bt-lr。

对于Firefox，请在html中添加orient="vertical"属性。可惜他们这样做了。视觉样式应该通过CSS控制，而不是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" />

免责声明：

此解决方案基于尚未定义或未定义的CSS属性的当前浏览器实现。如果您打算在代码中使用它，准备进行代码调整，因为新的浏览器版本已经发布，w3c建议已经完成。

MDN contains an explicit warning反对在网络上使用-webkit-appearance：

不要在网站上使用这个属性：它不仅是非标准的，而且它的行为从一个浏览器变为另一个浏览器。即使关键字none在不同浏览器上的每个表单元素上也没有相同的行为，有些根本不支持它。

IE documentation中垂直滑块演示的标题错误地指示设置高度大于宽度将垂直显示范围滑块，但不工作。在code section中，它显然没有设置高度或宽度，而是使用writing-mode。 writing-mode属性as implemented by IE非常强大。遗憾的是，截至本文撰写时current working draft of the spec中定义的值更为有限。如果IE的未来版本不支持bt-lr支持当前提议的vertical-lr（相当于tb-lr），则滑块将显示为颠倒。最有可能的是，未来版本会扩展writing-mode以接受新值，而不是放弃对现有值的支持。但是，知道你在处理什么是很好的。

Answer 2

您可以使用css转换执行此操作，但要小心容器高度/宽度。您也可能需要将其放低：

＆＃13;

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

＆＃13;

<input type="range"/>

＆＃13;

或等效的3d变换：

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

您也可以使用它来分别通过将水平或垂直方向设置为180度或90度来切换幻灯片的方向。

Answer 3

不将位置更改为绝对位置，请参见下文。这也支持所有最近的浏览器。

＆＃13;

<svg> 
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
			 viewBox="0 0 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve"> 
		 
		<g id="circle-border">
			<path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
				S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
				S137.265,1,88.833,1z"/>
		</g>
		<path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
			c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
		<path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
			c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
		</svg>
	</svg>

＆＃13;

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

＆＃13;

对于非常旧的浏览器，您可以使用CSS sandpaper

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

或使用

前缀选择器，例如IE9的-sand-transform: rotate(10deg);

Answer 4

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

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

Answer 5

非常简单。我已经使用-webkit-appearance: slider-vertical来实现，它可以在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;
}

Answer 6

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>

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

6 个答案:

免责声明：