Управление несколькими ползунками диапазона Django форма

Question

Что я хочу: Ползунки с несколькими диапазонами (число изменяется в зависимости от выбора пользователя) на одной странице, перемещение ползунков должно обновить значение и отобразить его в элементе span, а также обновить модель.

Проблема: К сожалению, я не знаю, как изменить значения ползунков при наличии нескольких ползунков, созданных с помощью forl oop. Элемент span не обновляется, и элемент значения ползунка также не изменяется при перемещении маркера ползунка.

Html:

<form method="post">
formset1.management_form }}
for form in formset1 %}
    <div class="custom-slider-container">
        <label>{{ form.name.value }}</label>
        <span id="demo-{{ forloop.counter0 }}" class="range-val">0</span>
        {{ form.weight }}
    <div>
{% endfor %}
</form>

Views.py:

initial = Driver.objects.filter(simulation=chosenSim, type='KEY_OUTPUT')
formset = sliders_formset(request.POST or None, queryset=initial)
    if 'sliders_confirm' in request.POST:
        if formset.is_valid():
            instances = formset.save(commit=False)
            for form in instances:
                form.save()
        return HttpResponseRedirect(request.path_info)

Forms.py

sliders_formset = modelformset_factory(Driver, fields=['name', 'weight'], extra=0,
                                   widgets={'weight': RangeInput(attrs={'class': 'custom-slider', 'max': 20})})

Если нужна какая-либо другая информация, пожалуйста, дайте мне знаю и я добавлю!

Answer 1

Использование «каждого» решило мою проблему!

<script>
    var rangeSlider = function(){
        var slider = $('.custom-slider-container'),
        range = $('.custom-slider'),
        value = $('.range-val-label');

        range.each(function(){
            var range_val = $(this).attr('value');
            var range_val = Math.trunc(range_val);
            $(this).prev().html(range_val);
        });

        slider.each(function(){

            value.each(function(){
                var value = $(this).next().attr('value');
                $(this).html(value);
            });

            range.on('input', function(){
                $(this).prev(value).html(this.value);
            });
        });
    };
rangeSlider();
</script>