{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Question 1/2 <hr>
{% endblock %}

{% block content %}
<p>What is your best estimate of your current annual household income (in $) before taxes?
{%  formfield player.income_guess %}
</p>
<br><br>
    <p>
        We are now interested in your assessment of <b>your rank in the national income distribution</b>.

        We ask you to select the option that reflects your best estimate of your own rank, based on your household income.
    </p>

    {% formfield player.percentile_ranking %}
{#      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">#}
{#        <colgroup>#}
{#            <!--<col width="25%">-->#}
{#            <col width="100%">#}
{#        </colgroup>#}
{#          <tr>#}
{#              <td>#}
{#                  Your estimate: <b style="color: red"> <output id="rank">Use the slider!</output></b>#}
{#              </td>#}
{#          </tr>#}
{#<tr>#}
{#<td> <input type="range" class="myclassRed" name="percentile_ranking" id="percentile_ranking" value="100" style="width: 100%" min="0" max="99" step="1"#}
{#            oninput="rank.value = 'I am in the top ' + (100 - percentile_ranking.value).toString() + '% of the income distribution'";/> </td>#}
{#</tr>#}
{#          <tr><td>#}
{#          <div class="sliderticks">#}
{#      <p>    </p>#}
{#        <p> </p>#}
{#      </td> </tr>#}
{#      <tr>#}
{#          <td style="padding: 0" >#}
{#              <div style="display: inline; float: left" ><b>Top 100%</b></div> <div style="display: inline; float: right"><b>Top 1%</b></div>#}
{#          </td></tr>#}
{##}
{#          <br></table><br>#}


<br><br>
   <div style="text-align: right;">
{% next_button %}   </div>





        {{form.errors}}

{% endblock %}


{% block styles %}
<style>
  .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 4px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 0 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    .myclassBlue::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: white;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
       .myclassRed::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: gray;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}


{% block scripts %}

<script>

$(document).ready(function () {


$('#percentile_ranking').on('mouseup keyup', function () {
    $('#percentile_ranking').addClass('myclass');
    $('#confirm').prop('disabled', false);
});


    });
</script>




{% endblock %}