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>
Anuj-Kumar-Sharma / TooltipProgressBar

un necesarry use of complex maths. #3
