slider - 范围酒吧 otree

Question

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

Answer 1

以下代码将范围的“左”值存储在模型left字段中，并将“右”值存储在模型字段中：Playerright

楷模：

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

因此，“技巧”是将输入字段呈现为隐藏： {{ form.left.as_hidden }} 然后使用您可以根据模型字段名称使用滑块的 id 从滑块传递值的事实。所以该left字段id_left在 html 中有 id，依此类推。