vertical slider html code example

Example 1: how to make range vertical

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

Example 2: vertical slider html

<!--
	For Firefox: orient="vertical"
	For Chrome & Safari: -webkit-appearance: slider-vertical
	For IE: writing-mode: bt-lr
-->

<!-- Example range slider -->
<input
    type="range"
    min="0" max="100"
    value="50" 
	class="vertical"
    orient="vertical" 
    style="-webkit-appearance: slider-vertical;
        	writing-mode: bt-lr;"
>

<!-- ***PLEASE NOTE***
	The -webkit-appearance property is non-standard,
	so it's behaviour may change across different browsers
-->

Example 3: adding vertical sliders in css

overflow-y: scroll;

Example 4: vertical sliders css

overflow-y: scroll;