1

I am trying to label a slider as in jQuery UI Slider Labels Under Slider. I am not dealing with a ui-slider however, but rather with the slider widget from oTree.

The excellent answer to the question Mandatory slider in oTree/django explains how to use a jQuery selector to select an oTree slider:

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

I have a slider that shows the current selected value (0-100). What I would like to do is to add a few labels below the slider (e.g. "cold", "neutral", "warm" if the slider value is a temperature). I tried the following code to select the oTree slider and append labels, but no labels appear.

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

The HTML of the page looks as follows:

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

I am unsure of which object (div? input?) to select and append the labels to.

user449277
  • 35
  • 5
  • Can you view source on page and post the input element HTML here? – Brian Patterson Mar 15 '18 at 23:18
  • Thanks for the hint, I included the HTML above. – user449277 Mar 15 '18 at 23:26
  • Maybe I need to append my labels to the "input-group-append" instead, rather than the "data-slider"? – user449277 Mar 15 '18 at 23:39
  • Label usually would surround the input but w otree and django etc who knows. Try the selector on id element as I suggested, if it doesn't work we can try the div – Brian Patterson Mar 15 '18 at 23:43
  • Updated answer with label syntax – Brian Patterson Mar 15 '18 at 23:57
  • Did it work? Please accept if so. Thanks! https://stackoverflow.com/help/someone-answers – Brian Patterson Mar 16 '18 at 02:03
  • Apologies for the delay, @BrianPatterson. It does not work yet, I'm afraid. I updated the question to explain in more detail what exactly I'm trying to achieve, since I think the problem is that I do not know which object (div, label, input) to append the labels to. Thanks a lot for your continued support, I will certainly accept an answer once I solved this problem. – user449277 Mar 16 '18 at 16:46

2 Answers2

2

since then oTree has slightly changed the form class naming.

use the code below:

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

What it does is the following:

  1. It sets a variable to false when the page is loaded.
  2. Unless this variable (SliderTouched) remains false the form will not submit
  3. When you touch the slider the variable sets True so the form can be submitted.
Philipp Chapkovski
  • 1,949
  • 3
  • 22
  • 43
  • Thank you very much for your quick answer, Philipp! The change being to use "#form" instead of ".form", you mean? I am primarily trying to understand how selecting the slider works, however. I am trying to achieve something different with this selector: to label the slider as in [link](https://stackoverflow.com/questions/10224856/jquery-ui-slider-labels-under-slider) Do you have any experience with that? – user449277 Mar 15 '18 at 23:11
  • Bravo for knowing this but I believe he's asking for explanation on selector criteria. Still upvoting this as relevant. – Brian Patterson Mar 15 '18 at 23:16
  • don't forget to include the reference to jquery-ui (something like that or put it to `static`: because otherwise the method `slider` that they use in the example you referenced to, won't work, because oTree by default includes only jquery, not jquery-ui – Philipp Chapkovski Mar 15 '18 at 23:19
  • Thank you for the hint. That didn't do the trick, since I believe oTree is not actually working with a jquery-ui slider, right? I am trying to label the slider that oTree produces (and am unsure as of whether this is the jquery-ui one). – user449277 Mar 15 '18 at 23:29
1

Update..

As per OP comments, the selector that ended up being appended to for the oTree slider was .controls

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

Original...

Using the has attribute selector (https://api.jquery.com/has-attribute-selector/) you can select by an attribute. 

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

Given above html.. You can select it with... 

[data-slider]

Adding in input[type="range"] will further qualify result to only include type range.

Brian Patterson
  • 1,615
  • 2
  • 15
  • 31
  • Thank you very much for your kind help! I have included example code above. What I'm struggling with is that oTree uses Django expressions, so I haven't been able to find the relevant HTML attributes. Any idea where I could look for these? (My Django knowledge is very limited.) – user449277 Mar 15 '18 at 23:16
  • View source on generated page possible? Then search for type="range" to find the element code – Brian Patterson Mar 15 '18 at 23:25
  • Thank you for the update. I seem to lack conceptual knowledge of what I want to append these labels to: the div or the input element? It seems that oTree already is setting up a separate div for showing the current value of the slider - do I need to use this same div to show some labels under the slider? – user449277 Mar 15 '18 at 23:43
  • Are we talking HTML ` – Brian Patterson Mar 15 '18 at 23:50
  • We're talking about the latter. I updated the question to describe what I'm trying to achieve: to add text labels below the slider (e.g. "cold"/"neutral"/"hot"). – user449277 Mar 16 '18 at 16:47
  • `var $label = $('').css('left', '10%'); $('.controls').append($label);` did the trick. It looks like the div of class "controls" (as seen in the above HTML) works as a selector for the oTree slider. Feel free to include this in your answer @BrianPatterson, your answers were of tremendous help in figuring this out. – user449277 Mar 16 '18 at 19:49
  • Thank you. I'm always happy to help. Nice job on figuring out that controls selector. Glad you got it handled. :) – Brian Patterson Mar 16 '18 at 23:28