Issue on Binding jQuery UI Slider with Checkbox Event

Issue on Binding jQuery UI Slider with Checkbox Event
I am able to check and uncheck some checkboxes on jQuey ui slider stop() using following code. But this looks like is not adding any event to the check boxes!. As you can see the check boxes are re-acting against direct check in out by logging on console but doing nothing when slider change. Can you please let me know why this is happening and how I can fix this?

  1. $(function() {
  2.   $("#slider-range").slider({
  3.     range: true,
  4.     min: 50,
  5.     max: 54,
  6.     values: [50, 54],
  7.     stop: function(event, ui) {
  8.       var selected = [];
  9.       $('input:checkbox[name=temple]').prop("checked", false);
  10.       $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

  12.       for (var i = ui.values[0]; i <= ui.values[1]; i++) {
  13.         selected.push(i);
  14.       }
  15.       $.each(selected, function(index, value) {
  16.         $("input:checkbox[name=temple][value=" + value + "]").prop("checked", true);
  17.       })

  19.     }
  20.   });
  21.   $("#amount").val("$" + $("#slider-range").slider("values", 0) +
  22.     " - $" + $("#slider-range").slider("values", 1));
  23. });

  25. $('input:checkbox[name=temple]').on('change', function() {
  26.   if ($(this).is(':checked')) {
  27.     console.log('Checked');
  28.   } else {
  29.     console.log('Un Checked');
  30.   }
  31. });