<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"+")"
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.