Making range slider vertical - html

Question

I am trying to customize a range slider according to my need i am almost there except for the orientation of it, currently it's aligned horizontally which should be vertical.
I have tried adding
data-orientation = "vertical"
and Orient="vertical" as well as
.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
}
got no luck.
current code base is as follows : Style
.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;
}
Markup
<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>
Is there something i am missing here? any help would is appreciated. Thanks

Answer 1

2 things
#media (-webkit-min-device-pixel-ratio:0) {
/* Non-IE styles here*/
.range-slider .input-range {
-webkit-appearance: none;
width: 449px;
height: 5px;
}
}
Is overwriting your
.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
}
Also you need to flip the width and height to match the vetical design
.input-range{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical;
width: 5px;
height: 449px;
}

Answer 2

you're looking for this appearance css property:
.input-range {
appearance: slider-vertical;
-moz-appearance: slider-vertical;
-webkit-appearance: slider-vertical;
}

Answer 3

Add:
input[orient=vertical] {
-webkit-appearance: slider-vertical;
height: 450px;
padding: 0 20px;
width: 20px;
writing-mode: bt-lr;
}
Remove:
.range-slider {
position: relative;
width: 450px;
float: left;
margin-right: 5px;
}