TooltipProgressBar
TooltipProgressBar copied to clipboard
Anuj-Kumar-Sharma
un necesarry use of complex maths.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent{
width: 250px;
}
#pos-parent{
width: 100%;
position: relative;
}
#pos-parent > div{
height: 10px;
border-radius: 100rem;
}
#total-pos{
position: absolute;
width: 100%;
background-color: gray;
}
#actual-pos{
position: absolute;
width: 15%;
background-color: red;
z-index: 1;
}
#main-slider{
height: 40px;
width: fit-content;
color: blue;
border:1px solid blue;
background:white;
display: grid;
font-size: large;
font-weight: bolder;
place-items: center;
position: relative;
padding-inline:2.5%;
}
#slider-arrow{
height:10px;
margin-inline: 2px;
width:10px;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
background: white;
transform: rotate(45deg);
position: relative;
top:-5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="slider-parent">
<div id="main-slider" draggable="true">
lambda text : 80%
</div>
<div id="slider-arrow">
</div>
</div>
<div id="pos-parent">
<div id="actual-pos"></div>
<div id="total-pos"></div>
</div>
<div style="position:relative;top:50px;">
<input type="range" min="1" max="100" value="50" id="myRange">
</div>
</div>
</body>
<script>
slider = document.getElementById("myRange")
val = slider.value;
document.getElementById("main-slider").innerText = "Lambda text: "+val+"%"
parent_width = document.getElementById("parent").clientWidth
arrow_width = document.getElementById("slider-arrow").clientWidth
slider_width = document.getElementById("main-slider").clientWidth
document.getElementById("actual-pos").style.width = val+"%"
document.getElementById("slider-arrow").style.left = (((parent_width-arrow_width-5)*val)/100)+"px"
document.getElementById("main-slider").style.left = (((parent_width-slider_width)*val)/100)+"px"
slider.oninput = function(){
val = this.value;
document.getElementById("main-slider").innerText = "Lambda text: "+val+"%"
parent_width = document.getElementById("parent").clientWidth
arrow_width = document.getElementById("slider-arrow").clientWidth
slider_width = document.getElementById("main-slider").clientWidth
document.getElementById("actual-pos").style.width = val+"%"
document.getElementById("slider-arrow").style.left = (((parent_width-arrow_width-5)*val)/100)+"px"
document.getElementById("main-slider").style.left = (((parent_width-slider_width)*val)/100)+"px"
}
</script>
</html>
