Функция триггера при программном изменении поля ввода

У меня есть ползунок, который изменяет значение полей ввода с именами «workload1» и «workload2». Настроив ползунок, следует отправить форму test-form1. (У меня нет кнопки отправки, и все мои параметры фильтрации работают с прослушивателями событий)

После отправки формы страница перезагружается, и ползунок должен быть установлен на значения, которые пользователь настроил вручную. Поэтому, если кто-то перемещает ползунок, страница перезагружается, а ручки ползунка находятся в том же положении, в котором их переместил пользователь. Чтобы это произошло, я передаю «workload_min» и «workload_max» обратно в свой шаблон «myfile.html».

Теперь вопрос в том, как я могу вызвать запуск прослушивателя событий при перемещении ручек ползунка?

Я пробовал с dispatchEvent(event), однако, поскольку значения передаются обратно в шаблон, dispatchEvent(event) будет запускаться снова и снова при бесконечной перезагрузке страницы.

Я также пытался использовать простой addEventListener('input', function ()), но изменение поля ввода за счет перемещения ручек ползунка не обнаружено.

Кто-нибудь знает, как справиться с этой проблемой?

HTML:

<input form = "test-form1" type = "text" name = "workload1" id = "workload1" readonly = "readonly">
<input form = "test-form1" type = "text" name = "workload2" id = "workload2" readonly = "readonly">
<div id = "slider-range"></div>

сценарий:

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 20,
      step:20,
      max: 100,
      values: {% if workload_min %}
                  [{{ workload_min}}, {{workload_max }}]
              {% else %}
                  [ 20, 100 ]
              {% endif %},
      slide: function( event, ui ) {
        $( "#workload1" ).val(ui.values[ 0 ]+"%");
        $( "#workload2" ).val(ui.values[ 1 ]+"%");
      }
    });
    
    $( "#workload1" ).val( $( "#slider-range" ).slider( "values", 0 ) + "%" );
    $( "#workload2" ).val( $( "#slider-range" ).slider( "values", 1 ) + "%" );
});


var workload1 = document.getElementById('workload1')

var event = new Event('input')

workload1.addEventListener('input', function() {
    form.submit()
})

workload1.dispatchEvent(event)

вид.py:

def djangoFunction(request):
    workload_min = request.POST.get('workload1')
    workload_max = request.POST.get('workload2')

    # do some filtering and preprocessing
    context = {'workload_min: workload_min',
               'workload_max: workload_max'}
    return render(request, 'myfile.html', context)