Hi,

I came across this slider from https://gitlab.com/gr0ssmann/otree_slider. This slider has been discussed here before but I couldn't get any idea where my exact issue lies. 

So in short, once the slider is revealed by clicking, the slider bar shrunks to roughly 25 % of the original (when the before reveal slider bar spans the width of the whole page) while the boxes defining the end points of the slider stay in their place. The revelead slider bar seems to have some fixed length, but I cannot find where that is being defined.

Please see Grossmann's GitLab for example, it has a GIF-file to highlight his excellent piece of work. So as the bar is clicked, in the GIF it stays at its original length, but with my implementation it shrunks as described. This does not look very professional as it should and like it is in the Grossmann's GIF-file. It's very clear how to make the before reveal slider bar narrower and so on, but I do not know how to adjust the revealed slider bar.

I couldn't navigate the CSS nor the JS file to understand where the issue is. Inspect elemenent didn't show any conflicting CSS elements or clear spot where the width of the revealed slider is set. Please see the code below. The JS file is in the GitLab repository.

models.py:
class Player(BasePlayer):
    allocation1 = models.FloatField()
    
pages.py:
class T1(Page):
    template_name = "Test_1_Templates/test_1_Slider.html"
    form_model = "player"
    

    form_fields = ["allocation1"]

page_sequence = (T1)

Finally, the test_1_Slider.html:

{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Test 1, make allocation with sliders
{% endblock %}

{% block content %}
    <style>
    .mgslider-wrapper {
            border-spacing: 10px;
        }
    .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
    .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
    .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
    .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
    }

    </style>
    
    
    <p>Click the blue bar to reveal the slider.</p>
    
    <p>Piece of information 1</p>
    <div id="slider1_here"></div>
    
    <script src="{% static 'mgslider.js' %}"></script>

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("allocation1", 0, 100, 0.5);
            slider1.print(document.getElementById("slider1_here"));
        });
    </script>

    <div>
    {% next_button %}
    </div>

{% endblock %}

Note: I have all the necessary oTree packages so do not worry about them.

Thanks for your help in advance!

I copied and ran your code on oTree 5.10.3 (except for the line 'template_name = "Test_1_Templates/test_1_Slider.html"'), but I cannot reproduce your issue. The slider looks just fine, see the attachment. I recommend you use your browser's Web Developer tool to debug your code.

Thanks for your answer. The issue might then be related to the oTree version, I guess, since I need to run my code in older oTree versions (3.4.0 or such), reasons being multifaceted. I also tried to figure out ways to deal with the issue via DevTools, but couldn't get anything useful out of them. 

Most of the time, I actually use the DevTools to iterate solutions since implenting them on the text editor and opening the devserver over and over again to check the end product just takes too much time. What I want to say is that, that I know quite well how things run on that side.

Anyways, this it what I can find from the DevTools regarding the slider bars once the slider is clicked.

<div id="mgslider_yF5sTZLy_allocation1" class="mgslider-before" onclick="mgsliders.lookup(&quot;allocation1&quot;).reveal(event)" style="display: none;"></div>

<input type="range" id="mgslider_yF5sTZLy_allocation1_" min="0" max="100" step="0.5" value="" class="mgslider form-range" oninput="mgsliders.lookup(&quot;allocation1&quot;).change()" onchange="mgsliders.lookup(&quot;allocation1&quot;).change()" style="display: block;">

The CSS side looks fine also via DevTools, although I must admit that I am not the most familiar with front end development. Could the issue be due to some inheritances of styles on the CSS side? I cannot say. 

I would highly appreciate if you could give me a hint about how to solve the issue.

You could try building your own hook function to help debug this issue. E.g.,

    slider1.hook = function (slider, value) {
        console.log("Width is", getComputedStyle(slider.id("input")).width);
    };

There you could also change the width and do all kinds of other stuff to find out what's going on.

Unfortunately, there is not much else that comes to mind. I personally would peel away at the slider by making use of Web Developer's margin and padding tools to find out where the extra space comes from.

Hi,

I think I solved it. The trick was to really peel away slider very carefully while constantly checking what's going on the CSS side. The way to solve the issue was 'too' simple. I just added this piece of code to the end of CSS specification:

.mgslider {
            display: block;
            width: 100%;
        }
        
So in case some other person encounters the same issue with oTree 3.x.x, this is the way to solve the issue described above for the slider shrinking. 

Thanks for your help!