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

{% block title %}
    Page title
{% endblock %}

{% block styles %}
    <style>

    /* style range */
input[type=range] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* style datalist */
input[type=range] + datalist {
    display: block;
    margin-top: -4px;
}
input[type=range] + datalist option {
    display: inline-block;
    width: calc((100% - 12px) / (var(--list-length) - 1));
    text-align: center;
}
input[type=range] + datalist option:first-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: left;
}
input[type=range] + datalist option:last-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: right;
}

    </style>
{% endblock %}

{% block content %}
    <input type="range" min="1" max="9" id="my-range" list="my-datalist"/>
    <datalist id="my-datalist" style="--list-length: 9;"><!--
      ---><option>1</option><!--
      ---><option>2</option><!--
      ---><option>3</option><!--
      ---><option>4</option><!--
      ---><option>5</option><!--
      ---><option>6</option><!--
      ---><option>7</option><!--
      ---><option>8</option><!--
      ---><option>9</option><!--
    ---></datalist>
    {% next_button %}

{% endblock %}