JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<input type="range" orient="vertical">
</body>

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;
  -webkit-appearance: none !important;
}