Search code examples
javascriptinternet-explorer-11

In IE 11 javascript input event is not getting fired


Am trying to capture the score 0 to 10 using range control. If there is no interaction done with range control then I need to disable the Next button. This is working fine in chrome,but in IE 11 below code is not getting invoked when range value is being changed. How to fix this?

$( 'input[type="range"]' ).on( 'input', function () {

    var control = $( this ),
        controlMin = control.attr( 'min' ),
        controlMax = control.attr( 'max' ),
        controlVal = control.val(),
        controlThumbWidth = control.data( 'thumbwidth' );

    var range = controlMax - controlMin;

    var position = ( ( controlVal - controlMin ) / range ) * 100;
    var positionOffset = Math.round( controlThumbWidth * position / 100 ) - ( controlThumbWidth / 2 );
    var output = control.next( 'output' );

    output
        .css( 'left', 'calc(' + position + '% - ' + positionOffset + 'px)' )
        .text( controlVal );

    $( this ).attr( "data-modified", "1" );

    $( "#next" ).removeAttr( "disabled" );

} );

Solution

  • I think IE11 is firing change-event, instead of input-event when range of range-input is changed.

    Here's an interesting comparison