i am creating vertical range bar and i changed the -webkit-appearance : slider-vertical.
I also changed the input-range bar's properties such as height , width ,webkit-slider-runnable-track and webkit-slider-thumb properties.
all the input range properties changed except the webkit-slider-thumb. It was set to the default property. I even changed the webkit-appearance to none inside the webkit-slider-thumb.
online code: Jsfiddle
<head>
<style type="text/css">
input[type=range][orient=vertical] {
-webkit-appearance: none;
-webkit-appearance: slider-vertical;/*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
width: 10%;
height: 40%;
}
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
background: yellow;
border: 1px solid black;
}
input[type=range]::-webkit-slider-thumb {
/*all the below css properties **not** applies to thumb*/
height: 3vmin;
width: 3vmin;
border-radius: 50%;
background-color : black;
}
</style>
</head>
<body>
<input type="range" orient="vertical">
</body>
