Input, Onchange Event Dont Fire When Value Is Set Manually

I want to catch the event on the range slider even if i press a button and change the Value by: $('input').val(1); http://jsfiddle.net/BaEar/188/ But the event 'input' dont fire b

Solution 1:

First, change the on handler to use change like

$("input").on("change", function() { 
    $("#output").text($(this).val());
});

Second, manually trigger it in the click handler like

$("button").click(function() {
   $("input").val(1); 
    $("input").trigger("change");
});

fiddle

Solution 2:

I think $("input").val(1) should be changed to $("input").val(1).trigger('input');. You are listening for input event so after changing the value that event should be fired.

jsfiddle -> http://jsfiddle.net/BaEar/191/

Solution 3:

Try this:

$("input").on("input change", function() {
    $("#output").text($(this).val());
});

$("button").click(function() {
   $("input").val(1);
   $("input").change();
});

http://jsfiddle.net/BaEar/192/

So the range slider is normally updating by changing the value. AmmarCSE solution only triggers, if a value is set.