使范围滑块垂直

Question

我正试图根据我的需要定制一个范围滑块，除了它的方向外，我几乎都在那里，目前它是水平对齐的，应该是垂直的。

我已尝试添加data-orientation = "vertical"和Orient="vertical"以及

.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
}

运气不好。

当前的代码库如下：样式

.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.PrixMin {
float: left;
color: #164188;
font-size: 19px;
margin-right: 5px;
}
.selecteurPrix {
padding-top: 15px;
display:block;
position:absolute;
top:90px;
left:0;
z-index: 1200
}
body {
font-family: sans-serif;
padding: 40px;
}       
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}

@media (-webkit-min-device-pixel-ratio:0) {
/* Non-IE styles here*/
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
border-radius: 5px;
background: #ccc;
outline: none;

}
}
@media (-ms-high-contrast:none),(-ms-high-contrast:active) {
/* IE styles here*/
.range-slider .input-range {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 450px;
outline: none;
}
}
.range-slider .input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-webkit-slider-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-webkit-slider-thumb {
background: #164188;
}
.range-slider .input-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #164188;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider .input-range::-moz-range-thumb:hover {
background: #164188;
}
.range-slider .input-range:active::-moz-range-thumb {
background: #164188;
}
.range-slider .range-value {
display: inline-block;
position: relative;
width: 100px;
color: #fff;
font-size: 23px;
line-height: 32px;
text-align: center;
border-radius: 3px;
background: #164188;
padding: 5px 10px;
margin-left: 7px;
}
::-moz-range-track {
background: #ccc;
border: 0;
}
input::-moz-focus-inner {
border: 0;
}
input[type=range] {
margin: 2px;
}
input[type=range]::-ms-track {
width: 450px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ccc;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}

标记

<div class="selecteurPrix">
<div class="PrixMin"> -100</div>
<div class="range-slider">
<input class="input-range" orient="vertical" type="range" value="0" min="-100" max="100" step="25">

</div> <div class="PrixMin"> 100</div>
</div>

我这里缺了什么吗？任何帮助都将不胜感激。感谢

Answer 1

2件事

@media (-webkit-min-device-pixel-ratio:0) {
/* Non-IE styles here*/
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
}
}

正在覆盖您的

.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
}

此外，您需要翻转宽度和高度以匹配兽医设计

.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
width: 5px;
height: 449px;
}

Answer 2

您正在寻找这个外观css属性：

.input-range { 
appearance: slider-vertical;
-moz-appearance: slider-vertical;
-webkit-appearance: slider-vertical;
}

Answer 3

添加：

input[orient=vertical] {
-webkit-appearance: slider-vertical;
height: 450px;
padding: 0 20px;
width: 20px;
writing-mode: bt-lr;
}  

删除：

.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}