Search code examples
jqueryslidermootoolsconflict

jQuery NoUiSlider doesn't work with Mootools

afer I upgrade slider to version 6 , slider disapear on mouse down I find out the problem is Mootools but I can't find where :( I create a smiple slider:

<div id='test'></div>

jQuery("#test").noUiSlider({
            range: {
                'min' : 0,
                'max' : 5000
            }
            ,step : 50
            ,start: [1000, 4000]
            ,behaviour: 'tap'
            ,connect: true
            ,direction: 'rtl'
        });

Check this plz:

http://jsfiddle.net/jixa/5cDgJ/

Solution

  • This issue happens because MooTools is interfering with the event management in jQuery. Both libraries attempt to handle an event called slide, and unfortunatly, MooTools goes first. The reason you are seeing this in noUiSlider 6 and not 5 is because it changed it's event handling from a callback to actual events.

    There a two ways to fix this:

    • Removed the conflicting part from MooTools-more, assuming you don't need this;
    • Find nd replace 'slide' in the noUiSlider source. If you change it to xSlide, for example, this example should be gone. You'll have to do this again if you update in the future.

    For what it is worth; jQueryUI seems to suffer from the same issue. Perhaps this bug tracker page can be of some assistance:

    http://bugs.jqueryui.com/ticket/4168