JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<div class="slider-holder">
	<input id="slide" type="range" step="10" class="vVertical" min="1" max="20" value="1" onchange="updateSlider(this.value)" />
</div>
<div id="sliderAmount">1</div>

CSS

input[type=range].vVertical {
            -webkit-appearance: none;
            background-color: #000;
						opacity: 0.6;
            width: 120px;
            height: 2px;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            z-index: 0;
            outline: none;
            /*box-shadow: 0px 0px 2px 1px #cecece;*/
            direction: rtl;
        }
        .slider-holder {
            position: absolute;
						top: 200px;
            width: 100px;
            right: 80px;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-color: #000;
						opacity: 0.7;
            width: 2px;
            height: 10px;
            /*border: 1px solid #e6e6e6;*/
            cursor: pointer;
						  -webkit-transition: all 0.25s;
  					transition: all 0.25s;

        }
				
				#sliderAmount {
					position: absolute;
					top: 20px;
					right: 100px;
				}

JavaScript

var slide = document.getElementById('slide'),
    sliderDiv = document.getElementById("sliderAmount");

slide.onchange = function() {
    sliderDiv.innerHTML = this.value;
}