{% extends "global/Page.html" %}
{% load otree static %}

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo2");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = this.value;
}

</script>

{% block styles %}


<style>
        .button_help{
  background-color: whitesmoke;
  border: none;
  color: blue;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    border-radius: 8px;
}

button:hover {background-color: lightblue}



</style>

{% endblock %}

{% block title %}
Initial Belief
{% endblock %}

{% block content %}






Please use the slider below to indicate your belief about ranking in the top 50%.
</p>
    <table>
    <tr>
        <td align="center">    0%    </td>
        <td>

            <div class="input-group">
    <input type="range" name="belief_50_s" min="0" max="100" step="1" class="form-range" id="myRange">


             </div>
 </td>
        <td align="center"> 100%   </td>
    </tr>
            <tr>
        <td>   </td>
        <td align="center">
            <span id="demo2" style="font-weight:bold;color:black"></span> % <br>



 </td>
        <td>  </td>
    </tr>

</table>



    {% next_button %}

{% endblock %}