范围酒吧树

Question

我在 Otree 中放置双范围滑块时遇到问题。 ¿有人可以向我解释，最简单的方法是什么？。我想知道也许我必须导入一些新的小部件，但我不知道如何开始，对吗？

Answer 1

以下代码将在 Player 模型的 left 字段中存储范围的 'left' 值，并在 right 中存储 'right'一：

型号：

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

观看次数：

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

模板：

{% 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 %}

所以 'trick' 是将输入字段呈现为隐藏： {{ form.left.as_hidden }} 然后使用这样一个事实，即您可以根据模型字段名称使用它们的 id 从滑块传递值。所以 left 字段在 html 中有 id_left id，依此类推。

范围酒吧树

Range bar otree

slider

range

otree