{% load otree %}

<div class="task_box">
    <div style="width: 872px; margin: 50px auto 50px auto">
        <div style="position: relative; height: 100px">
            <div style="position: relative; margin: 50px 0px 50px 0px">
                <div id ="self" class="self"></div>
                <div id ="self_label" class="self_label" style="text-align:center">You</div>
                <div id ="group" class="group"></div>
                <div id ="group_label" class="group_label" style="text-align:center">Player B</div>
            </div>
            <div class="line"></div>
        </div>
        <div style="width: 100%; height: 50px; position: relative">
            <div style="width: 125px; top: 25px; left:0%; position:absolute";>Identify Weakly</div>
            <div style="width: 125px; top: 25px; left:100%; margin-left: -120px; position:absolute">Identify Strongly</div>
        </div>
        <div style="width: 100%; height: 50px; position: relative">
            <div class="start_point"></div>
            <input type="range" min="0" max="400" value="200" class="slider" id="slider" name="state_attachment">
        </div>
    </div>
</div>   
   
<style>
    .self{
        position: absolute;
        height: 50px;
        width: 50px;
        margin-top: 25px;
        left: 193px;
        border: solid black 2px;
        border-radius: 50%;
    }
    .group {
        position: absolute;
        height: 50px;
        width: 50px;
        margin-top: 25px;
        right: 193px;
        border: solid black 2px;
        border-radius: 50%;
    }
    .self_label {
        position: absolute;
        width: 100px;
        left: 193px;
        margin-left: -25px;
    }
    .group_label {
        position: absolute;
        width: 100px;
        right: 193px;
        margin-right: -25px;
    }
    .line {
        position:absolute;
        height:2px;
        width:100%;
        top: 50px;
        background: #27001f;
    }
    .start_point {
        position: absolute;
        height: 30px;
        width: 30px;
        margin-left: -15px;
        margin-top: -1px;
        left: 50%;
        border: medium solid #d3d3d3;
        border-radius: 5px;
        background: #d3d3d3;
        z-index: -100;
    }
    .slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 10px;
        outline: none;
        border-radius: 5px;
        background: #d3d3d3;
    }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #1123af;
        cursor: pointer;
    }
    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #1123af;
        cursor: pointer;
    }
</style>

<script>
    var self = document.getElementById('self');
    var group = document.getElementById('group');

    var self_label = document.getElementById('self_label');
    var group_label = document.getElementById('group_label');

    var slider = document.getElementById("slider");

    slider.oninput = function() {
        self.style.left = parseInt(this.value) * 0.965 + 'px';
        group.style.right = parseInt(this.value) * 0.965 + 'px';

        self_label.style.left = parseInt(this.value) * 0.965 + 'px';
        group_label.style.right = parseInt(this.value) * 0.965 + 'px';

    }
</script>