jQuery UI Slider moving upwards and disappearing in the div when used

Question

I\'ve replaced a MooTools slider with a jQuery UI slider as our content management system uses jQuery and various other jQuery UI elements. I\'ve run into a problem where on Fir

Answer 1

When integrating jquery+ui with mootools(it is also jquery library) both libraries answer to the "slide" event, and unfortunately, mootools shoots first.u can do like this.

jQuery('div.slider')[0].slide = null; jQuery('div.slider').slider({...});

Answer 2

Until the jquery-ui team solves this problem, I made changes to jquery-ui lib. I've changed these 9 'slide' to 'superslide'

> grep -noE '(\W+)slide(\W+)' jquery-ui-1.8.14.custom.min.js
287::"slide",
299:="slide";
.slide(
301::{slide:
303:.slide(
417::"slide",
427:("slide",
("slide",
773:.slide=

and then use .superslide instead .slide in your js-code on the page which have both mootools and jquery. For ex:

jQuery( "#slider" ).slider({
    range: "min",
    min: 5000,
    max: 1000000,
    value: 300000,
        ... 
    superslide: function( event, ui ) {
        ...
    }
});

Hope, this helps.

Answer 3

This worked for me:

        // This fixed the conflict between slider and motools
        jQuery.ui.slider.prototype.widgetEventPrefix = 'slider';

        jQuery( "#slider-range" ).slider({
          range: true,
          min: 16,
          max: 99,
          values: [ 16, 99 ],
          slide: function( event, ui ) {
            jQuery( "#age_range" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
          }
        });

Answer 4

This was a problem caused by MooTools and jQuery interfering with each other as per: http://dev.jqueryui.com/ticket/4168