Menu icon Foundation
Range Slider mouseup when out of focus

Hi there. I'm wondering if anyone has dealt with, and found a solution to this issue.

I am using a range slider. If the mouse clicks on the slider button, and while sliding the mouse leaves the focus area, the mouse up does not fire. You have to keep the mouse on top of the slider button in order for the mouseup to register. I would like the ability to have the mouseup fire even if the mouse leaves the focus area.

In my searching I have found the following code, but not sure how to implement it into Foundations slider.js

Any suggestions?

var $this = $(this);
        $this.bind('mouseleave', function(){
            $('body').one('mouseup', function() {
                $this.click();
            });
        });
        $this.mouseup(function() {
            $(this).unbind('mouseleave');
        });

Slider

range sliderslidermouseup

Hi there. I'm wondering if anyone has dealt with, and found a solution to this issue.

I am using a range slider. If the mouse clicks on the slider button, and while sliding the mouse leaves the focus area, the mouse up does not fire. You have to keep the mouse on top of the slider button in order for the mouseup to register. I would like the ability to have the mouseup fire even if the mouse leaves the focus area.

In my searching I have found the following code, but not sure how to implement it into Foundations slider.js

Any suggestions?

var $this = $(this);
        $this.bind('mouseleave', function(){
            $('body').one('mouseup', function() {
                $this.click();
            });
        });
        $this.mouseup(function() {
            $(this).unbind('mouseleave');
        });

Slider
Rafi Benkual over 2 years ago

You'd need to add this the slider.js file. Though I'm not sure where because I don't know where this code came from. Is this a solution for a Foundation slider or just a generic jQuery function?

Jim Christenson over 2 years ago

Thanks for the reply, Rafi. I actually did have all the nessesary Foundation files loaded, but thanks for checking.

The issue was that I was firing a mouseup to post the number selected by the slider

jQuery('[data-slider]').on('mouseup.fndtn.slider', function(){
if (num_avail != jQuery(this).attr('data-slider')) {
submitForm();
}
});

Problem was when the user's mouse wasn't directly over the slider. Ended up fixing it with this:

jQuery('[data-slider]').bind('mouseleave', function(){
jQuery('body').one('mouseup', function() {
jQuery ('[data-slider]').mouseup();
});
});

sachin 3 months ago

You can use any mouse from this best gaming mouse list. It will help for sure.