Hi All,

I want to essentially recreate the example from the oTree Documentation (https://otree.readthedocs.io/en/latest/forms.html#example-radio-buttons-arranged-like-a-slider) but I want there to be labels below or above each radio button with a label for it's value (for example, on the documentation example it would have -3, -2, ..., 2, 3 written above each respective radio button).

Any tips on how to do this?

Thanks!

One way to place the values below or above the respective radio button would be using a table.

Here’s an example:

<p>{{ form.pizza.label }}</p>
<table>
    <tr>
        <td></td>
        {% for label in form.pizza.choices %}
            <td style="text-align: center; width: 2.5em; color: gray;">{{ label }}</td>
        {% endfor %}
        <td></td>
    </tr>
    <tr>
        <td>Not at all&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        {% for radio in form.pizza %}
            <td style="text-align: center;">{{ radio }}</td>
        {% endfor %}
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Very much</td>
    </tr>
</table>