Jquery slider attach with Mouse event

I am using jquery slider which working fine in chrome browserbut when I run the same code in firefox then an event is attach with the mouse and when I move either left or right then It auto slide scroll.

So I want it functionality as like chrome. Can any 1 please help me that how can I stop that hover effect from firefox

I am using the samve version of jquery-min.js and jquery-ui.js that is 1.11.1 and jquery-ui.css version 1.9.1.

Any one's thought or review is much appreciated

I paste complete code below and also set fiddle link

<html>
<head>

   <title>slider problem</title>

  <link href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

</head>
<body>

<div id="" class="span12 sliderSpecific ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" tabindex="-1" style="left: 0%;"></a></div>
<script type="text/javascript">

  $(document).ready(function(){

    $('.sliderSpecific').slider({
      animate: true,
      range: "min",
      step: parseInt(50),
      slide: function( event, ui ) {
        alert(' slider is slide here');
      }
    });
  });

</script>
</body>
</html>

Solution

I was able to re-create the issue, but it's not a bug. It's browser specific behavior related to how the mouseup event is processed. Actually IE (edge) has the same behavior as Firefox. Chrome seems to be the exception, but you can still simulate the same behavior in chrome. I haven't tested Safari or any other browsers. What this comes down to is the slide function is triggered on mousedown. You have defined that function as raising an alert. What typically is happening (I'm guessing) is that after the alert opens you are picking your finger up off the mouse button and clicking again on the OK button. This causes the alert's message box to handle the mouseup event. Chrome happens to handle it nicely, allowing the parent window (main browser window) to receive the mouseup event. Apparently Firefox and IE do not. Therefore, the page still thinks the mouse button is depressed, and thinks you're still trying to use the slider after you close the alert.

I think the fact that I can predict that you can simulate this in chrome is evidence that I understand the problem. The way to simulate it in chrome is to click on the slider and start to drag it, but when the alert opens, do not release the mouse button, instead use the spacebar to "click the OK button". After the alert closes, while still holding the mouse button down, move left to right and you'll see the same result that you saw in Firefox. You're manually simulating the way Firefox is treating the mouse's state.

So how do you fix this? Remove the alert, or put the alert on a timeout, which will allow the mouseup event to be handled before the alert message box gobbles it up...

$(function() {
    let cnt = 0; // keeping a count for unique messages

    $('body').append('<div id="output"></div>'); // add output container

    $('.sliderSpecific').slider({
      animate: true,
      range: "min",
      step: 50,
      slide: () => {
        // Using blocking behavior directly causes unexpected behavior in IE/Firefox 
        //alert('sliding...'); 

        // Workaround to allow use of blocking output (alert/confirm):
        setTimeout(() => alert('yay, on a delay works!'));

        // Or use non-blocking output:
        //console.log('sliding...');  
        $('div#output').html(`slider is slide here (${cnt++})`);
      }
    });
});