My Request: I am looking to have multiple Range sliders (the number will change based on user selections) on a single page. When the sliders are moved, I want the value to be updated and displayed in a span element, as well as updating the model.
The Issue: I am struggling with changing the values of sliders when there are multiple sliders created using a for loop. The span element does not update, and the value of the slider does not change when I move the handle.
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})})
If you require any additional information, please let me know!