html - how can i deliver two values to the django backend in jquery slider?

Question

I want to deliver two values to the Django backend in a GET form. The two values are values[0] and values[1]. How can I modify the input tag in HTML?

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 1910,
    max: 2019,
    values: [1950, 2010],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + "won - " + ui.values[1] + "won");
    }
  });
  
  $("#amount").val($("#slider-range").slider("values", 0) + "won - " + $("#slider-range").slider("values", 1) + "won");
});

<FORM NAME="myForm" method="GET" action="{%url 'search_result'%}">
  <p>
    <label for="amount">won:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" aria-valuemin="">
  </p>
  <input type="submit" value="search" id="search_button">
</FORM>

question from:https://stackoverflow.com/questions/65598639/how-can-i-deliver-two-values-to-the-django-backend-in-jquery-slider

Answer 1

Assuming you're not using AJAX for this then you can achieve your goal by setting the slider from and to values in hidden fields within your form, as in the following example.

$(function() {
  let updateSliderFields = () => {
    let values = $("#slider-range").slider("values")
    $('#from').val(values[0]);
    $('#to').val(values[1]);  
    $("#amount").val(`${values[0]} won - ${values[1]} won`);
  }
  
  $("#slider-range").slider({
    range: true,
    min: 1910,
    max: 2019,
    values: [1950, 2010],
    slide: updateSliderFields
  });
  
  updateSliderFields();
});

#amount {
  border: 0;
  color: #f6931f;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form name="myForm" method="GET" action="{%url 'search_result'%}">
  <p>
    <label for="amount">won:</label>
    <div id="slider-range"></div>
    <input type="text" id="amount" readonly aria-valuemin="" />
  </p>
  
  <input type="text" id="from" />
  <input type="text" id="to" />
  <input type="submit" value="search" id="search_button">
</form>