Range bar otree

Question

I am having problem to put a double range slider in Otree. ¿Someone can explain me, what is the easiest way to do that?. I was wondering that maybe I have to import some new widgets, but I don't know how to start, is this right?

Answer 1

the following code will store the 'left' value of a range in a left field of Player model, and the 'right' in the right one:

models:

class Player(BasePlayer):
   left = models.IntegerField()
   right = models.IntegerField()

views:

class MyPage(Page):
   form_model = 'player'
   form_fields = ['left', 'right']

template:

{% block content %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function () {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
                $("#id_left").val(ui.values[0]);
                $("#id_right").val(ui.values[1]);
            }
        });
        $("#amount").val("$" + $("#slider-range").slider("values", 0) +
            " - $" + $("#slider-range").slider("values", 1));
    });
</script>


<p>
    <label for="amount">Slider range:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>
{{ form.left.as_hidden }}
{{ form.right.as_hidden }}
{% next_button %}

{% endblock %}

So the 'trick' is to render the input fields as hidden: {{ form.left.as_hidden }} and then use the fact that you can pass the value there from the slider using their id, based on the model field name. So the left field has id_left id in the html, and so on.