Multiple range sliders appear to have global maximum

[bartvanb]

In my case I have multiple sliders with different ranges, e.g. length can be set between 0 and 250 cm and age between 0 and 120. Relevant minimal code is:

    var len_slider = document.getElementById('slider-length');

    noUiSlider.create(len_slider , {
        connect: true,
        range: {
            'min': 0,
            'max': 250
        },
        tooltips: true,
        start: [100, 200],
    });

    var age_slider = document.getElementById('slider-age');

    noUiSlider.create(age_slider, {
        connect: true,
        range: {
            'min': 0,
            'max': 120
        },
        tooltips: true,
        start: [20, 80],
    });

Now, when I try to get the values from my length slider (with length_slider.noUiSlider.get()), I get [100, undefined] where I would expect [100, 200]. Also, when I use the slider on my webpage, it will say it is undefined at any value above 120.

To me it seems that the maximum value of 120 that I give in the age_slider is somehow applied to the len_slider. Could you have a look at this?

[leongersen]

Could you add your HTML? You are referring to both length_slider and len_slider, is that a typo?

[bartvanb]

Well... I just made a minimal working example and there I don't see the issue. I only see it in the larger context of the demo that I'm making. I guess this is some side-effect of other elements, but time does not permit me to investigate it further at this moment.

If you are curious, I put the full code on a specific branch here. If you open templates/master.html and drag one of the top two sliders it will show undefined. I will try to have a look myself next week.

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.