jQuery UI Slider within google maps InfoBubble -

i'm building custom infobubble holding 2 jquery ui sliders manipulate data. had no problems creating bubble , slider. unfortunately, somewhere mouse event seems prevented bubbling slider.

i prepared fiddle explain behaviour: jsfiddle

to reproduce error, following:

1. click on slider knob 2. move mouse outside of infobubble 3. move mouse left , right use slider 4. move mouse info window , see slider movement cease immediately. 

does know event gets lost , how fix situation?

ok, invested quite bit of time find solution this. got working now!

the problem lies within infobubble code. events being prevented bubbling map, apparently prevent ghostclicks through bubble. unfortunately prevents other listeners working properly. code snippet handling events found on line 808:

/**  * add events stop propagation  * @private  */ infobubble.prototype.addevents_ = function() {   // want cancel events not go map   var events = ['mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup',       'mousewheel', 'dommousescroll', 'touchstart', 'touchend', 'touchmove',       'dblclick', 'contextmenu', 'click'];    var bubble = this.bubble_;   this.listeners_ = [];   (var = 0, event; event = events[i]; i++) {     this.listeners_.push(       google.maps.event.adddomlistener(bubble, event, function(e) {         e.cancelbubble = true;         if (e.stoppropagation) {           e.stoppropagation();         }       })     );   } }; 

now remove events array, want use without of impact. decided take softer approach , allow events, needed sliders (and links) work:

infobubble.prototype.addevents_ = function() {   // bla bla code, see above       google.maps.event.adddomlistener(bubble, event, function(e) {         // allow mouseup-events         if(e.type == 'mouseup') { return; }         // allow click events button classes         if(e.type == 'click' && $(e.fromelement).closest('.btn') ) { return; }         // allow events come jquery ui slider         if( $(e.fromelement).is("div[class^='ui-slider-'],div[class*=' ui-slider-']") ) { return; }          // else: have         e.cancelbubble = true;         if (e.stoppropagation) {           e.stoppropagation();         }     );   // bla bla code, see above }; 

you can find working example here: fiddle