Search code examples
jqueryjquery-uiautosize

Call Plugin within jquery-ui slider function


I am using a range-slider from jquery ui and want to call another plugin (autosize) from its slide function. But in this way it does not work:

$( "#slider-range" ).slider({
  range: true,
  min: 100000,
  max: 5000000,
  step: 100000,
  animate: true,
  slide: function( event, ui ) {
    $( "#range_max" ).val(ui.values[ 1 ])).autosizeInput();
  },
});

How to call the autosizeInput() on the #range_max input field?


Solution

  • Here's a work-around where I bind a function to the input event of the text box and trigger it when the slider is moved.

    $("#slider-range").slider({
      range: true,
      min: 100000,
      max: 5000000,
      step: 100000,
      animate: true,
      slide: function( event, ui ) {
        $( "#range_max" ).val(ui.values[ 1 ]).trigger('input');
      }
    });
    
    $("#range_max").on("input", function() {
      $(this).autosizeInput();
    });
    

    Updated Fiddle.