Search code examples
jquerygoogle-chromejquery-uijquery-ui-slider

jQuery slide stopped triggering events in Chrome 61.0.3163.100


Three days ago this used to print console output when moving the slider (in Firefox nightly):

$(document).ready(function() {
  $('.slider').slider({
    slide: function() {
      console.log('slide');
    },
    change: function() {
      console.log('change');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="range" min="0" max="10" value="0" class="slider" id="slider0" name="slider0"/>

Today when I try it (in Chrome 61.0), it doesn't log anything to the console. Did I miss something, or is it some type of update?


Solution

  • The reason it doesn't work is that <input/> is that it's not intended to use as a slider with jQuery UI. This works on regular input sliders, and without jQuery UI:

    $(function() {
      var prevVal = {};
      $('.slider').on('change mousemove', function () {
        var slider = $(this);
        if (slider.val() != (prevVal[slider.attr('id')] || 0)) {
          prevVal[slider.attr('id')] = slider.val();
          slider.trigger('slide');
        }
      });
      $('.slider').on('slide', function () {
        console.log('Sliding:', $(this).val());
      });
    });