Несколько виджетов для одного поля формы в Django

У меня следующая форма:

    class ExcipientForm(ModelForm):
    class Meta:
        model = Excipient
        fields = (
            "Excipient_type",
            "Excipient_concentration",
        )
        widgets = {
            'Excipient_type': Select(attrs={
                'style' : 'width:100%;',
                'class' : 'dropdowns',
                }),
            
            'Excipient_concentration': TextInput(attrs={
                'class': 'slider',
                'type': 'number',
                'value':"20", 
                'max':"100", 
                'step': "0.1",
                'id':"excipient_concentration"
                }
            )
        }

ExcipientFormSet = inlineformset_factory(
    Parameters,
    Excipient,
    ExcipientForm,
    can_delete=False,
    min_num=1, 
    extra=0
)

Это шаблон для размещения в форме:

<form action="" id="form-container" method="POST"> {% csrf_token %} <div class='row'>
     <div class='col'>
       <label for="id_API_batch_number" class="form-label">API batch number : </label>
     </div>
     <div class='col'>
       {{ parameter_form.API_batch_number }}
     </div>
   </div>
   <hr class="my-4">
   <div class='excipient-form'>
     {{ excipient_form }}

     {{excipient_form.id.auto_id}}
     <input type="range" class="slider" name="slidervalue" value='20' max="100" step="0.1" onchange="updateTextInputRange(this.value);">
   </div>
   <button id="add-form" type="button">Add Excipient</button>
   <hr class="my-4">
   <label for="num6" class="form-label">Total Concentration: </label>
   {{ parameter_form.Total_concentration }}
   <br></br>
   <input type="submit" id="submit" class="btn btn-primary" value="Submit">
 </form>

Я пытаюсь заставить ползунки и соответствующее им числовое поле "синхронизироваться".

Вот JS, который у меня есть на данный момент.

//Update Textbox value from slider value
  function updateTextInputRange(val) {


    document.getElementByID('excipient_concentration').value = val;  // text input
    //checkValueSum();
  }

Некоторые из вещей, которые я пробовал:

1. Выяснение ID для каждого экземпляра ползунка и числового ввода. Это не удалось, так как каждый экземпляр имеет одинаковый ID.
2. Попробовал использовать несколько виджетов в одной форме. Это не удалось, так как html-элемент просто взял свойства последнего виджета.
.
3. Попробовал добавить еще одно поле в модель и использовать его в качестве слайдера в виджете формы. Это не позволяет мне "синхронизировать" значения ползунка и числа без обратного вызова на сервер.
.

Есть идеи, как это можно осуществить?

widget = MultiWidget(widgets={'Excipient_type': Select, 'Excipient_concentration': TextInput})