如何使用oTree选择器标记jQuery滑块小部件？

Question

我正试图给滑块贴上标签，就像在jQuery UI Slider Labels Under Slider中一样。不过，我不是在处理ui滑块，而是处理来自oTree的滑块部件。

对Mandatory slider in oTree/django问题的出色回答解释了如何使用jQuery选择器来选择oTree滑块：

$('[data-slider] input[type="range"]')

我有一个滑块，显示当前选定的值(0-100)。我想要做的是在滑块下面添加一些标签(例如，如果滑块值为温度，则为“冷”、“中性”、“温暖”)。我尝试了下面的代码来选择oTree滑块和附加标签，但是没有出现标签。

{% formfield player.mySliderInput type="Slider"}

{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var mylabel = $('<label>25</label>').css('left', '25%');
    $('[data-slider] input[type="range"]').append(mylabel);
});
</script>
{% endblock %}

页面的HTML如下所示：

<div class="form-group required">     
  <label class="col-form-label" for="id_myInput">How hot is it? (0-100):</label>
  <div class="controls  field-myInput">
    <div class="input-group slider" data-slider>
      <input type="range" name="myInput" value="None"
        step="1"
        min="0"
        max="100"
        required
        id="id_myInput"
        class="form-control"
      />

      <div class="input-group-append">
        <span class="input-group-text" data-slider-value title="current value"></span>
      </div>
    </div>
  </div>
</div>

我不确定哪个物体(div？输入？)若要选择并附加标签，请执行以下操作。

Answer 1

更新..。

根据OP注释，为oTree滑块追加的选择器是.controls。

var $label = $('<label>sometext</label>').css('left', '10%'); 
$('.controls').append($label);

原版..。

使用has属性选择器(https://api.jquery.com/has-attribute-selector/)，您可以通过属性进行选择。

<input type="range" data-slider="someval">

给出上述html..。你可以用.

[data-slider] 

添加input[type="range"]将进一步限定结果仅包括类型范围。

Answer 2

从那以后，oTree稍微改变了表单类的命名。

使用以下代码：

{% block scripts %}
<script>
    $(function () {
        var SliderTouched = false;
        var selector = $('[data-slider] input[type="range"]');
        selector.change(function () {
            SliderTouched = true;
        });

        $("#form").submit(function (event) {
            if (!SliderTouched) {
                event.preventDefault();
            }
        });
    });

</script>
{% endblock %}

它所做的工作如下：

1. 它在加载页面时将变量设置为false。
2. 除非此变量(SliderTouched)仍然为假，否则表单将不提交。
3. 当您触摸滑块时，变量设置为True，以便表单可以提交。