How to update jquery ui slider state when happens external event

Question

I have the following slider configuration:

$("#slider-range100").slider({
            range: true,
            min: 5,
            max: 90,
            values: [7, 35],
            slide: function (event, ui) {
                $("#1amount100").val(ui.values[0]);
                $("#2amount100").val(ui.values[1]);

            }
        });

Now inputs $("#1amount100") and $("#2amount100") refreshes when I move slider.

I want also to refresh slider state when I change inputs values.

Does jquery ui slider can it ?

Answer 1

You could add a listener on the inputs to trigger a change in the slider. This is a crude example, but you would do the following:

 $slider = $("#slider-range100"); //cache your slider
 $( "#1amount100").change(function() {

      //when the first input changes, update the LEFT value of the slider only
      $slider.slider( "option", "values", 
      [ this.value, $slider.slider( "option", "values" )[1] ] );

  });

 $( "#2amount100").change(function() {

      //when the first input changes, update the RIGHT value of the slider only
      $slider.slider( "option", "values", 
      [ $slider.slider( "option", "values" )[0], this.value ] );

  });

(You obviously need to correct for the types of input that it might receive. Also, you need to control for user based input change versus jQuery based input change or else it may go into a loop. I started with a bit to guide you with the isUserChange)