<body>
  <div style = "position:absolute;inset:0;;margin:auto;height:fit-content;width:500px;transform:translateY(-50%)">
<img id ="image" src="https://pranavishvar.github.io/Modern-UI-for-OTP-input/arrow5.png">
  
<div class = "container">
  
 <h1 id="value_display"></h1><br><br>
<button onclick = "add()">+</button><input   type="range" id="range_btn" name="range_btn" min=0       max=180 value = 0><div class = "sub_align"><button onclick = "subtract()">-</button>
  
 </div>
  </div>
</body>
body{
  text-align:center;
}
input{
  width:400px;
  height: 40px;
  outline:none;
}
button{
  font-weight: large;
  font-size: 60px;
  background-color: transparent;
  outline: none;
  border-width: 0px;
}
.sub_align{
  position:absolute;
  top: 31px;
  left: 460px;
}
input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: dodgerblue;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  margin-top: -12px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
}
h1{
  color:black;
  font-weight:bold;
  position:absolute;
  font-family: 'Gill Sans', 'Gill Sans MT',     Calibri, 'Trebuchet MS', sans-serif;
  left: 235px;
}
img{
  width:285px;
  position: absolute;
  left: 117px;
  top: 75px;
  transform: rotate(0deg);
}
.container{
  position:absolute;
  top: 240px;
}
var value_display_v = document.getElementById("value_display")
var range_btn_v  = document.getElementById("range_btn")
var image_v = document.getElementById("image")

value_display_v.innerHTML = range_btn_v.value
range_btn_v.oninput = function () {
value_display_v.innerHTML = this.value 
image_v.style.transform = "rotate("+this.value+"deg"+")"
}
function add() {
  range_btn_v.value = parseInt(document.getElementById("range_btn").value) + 1
  value_display_v.innerHTML = range_btn_v.value
  image_v.style.transform = "rotate("+range_btn_v.value+"deg"+")"
}
function subtract() {
  range_btn_v.value = parseInt(range_btn_v.value) - 1
  value_display_v.innerHTML = range_btn_v.value
  image_v.style.transform = "rotate("+range_btn_v.value+"deg"+")"
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.