Vertical slider for chrome and moz - html

Question

Im styling a vertical slider using -moz and -webkit.
With mozilla i declare it vertical using orient="vertical" and all the styling works fine.
With chrome since im using -webkit-appearance: none; for styling i can't use -webkit-appearance: slider-vertical, this forces me to use -webkit-transform: rotate(90deg);
The issue is that in mozilla i can use height to declare the real height of the slider instead by rotating it with chrome i'm forced to use width.
#sens[type=range]{
-webkit-appearance: none;
height: 220px; //in chrome is width since it is rotated
}
How can i solve this?

Answer 1

ok, I think you need something like this.
For first you need to read about ::-webkit-slider-runnable-track and ::webkit-slider-thumb. link1 and link2 very useful properties.
And now you can do that like that:
input[type=range] {
-webkit-appearance: none;
-webkit-transform: rotate(90deg);
margin-top: 50px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: red;
margin-top: -5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
<input type="range" />