[Answered ]-Trigger function when input field is changed programmatically

by

1👍

✅

The jQuery UI Slider documentation specifies a change function that can be added to the configuration object. This function will get called whenever the user changes the value of the slider by moving one of its handles. We can use this function to submit the form.

$(function() {
  $("#slider-range").slider({
    change: function() {
      console.log(`min: ${$('#workload1').val()}`);
      console.log(`max: ${$('#workload2').val()}`);
      console.log('submit form now');
      // form.submit();
    },
    range: true,
    min: 20,
    step: 20,
    max: 100,
    values: [40, 80],
    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) + "%");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet"/>
<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>
👤76484

Leave a comment