ionRangeSlider is not a function

[nguyeda]

Hi Guys,

I'm trying to add the ion-range-slider to an angular 4.3.2 project generated by JHipster 4.10.2. I've imported the module, added the scripts in the angular-cli.json file. When I try to use the component, I get the following error :

ERROR TypeError: jQuery(...).ionRangeSlider is not a function
    at IonRangeSliderComponent.initSlider (ion-range-slider.component.js?85fc:48)
    at IonRangeSliderComponent.ngOnInit (ion-range-slider.component.js?85fc:26)
    at checkAndUpdateDirectiveInline (core.es5.js?de3d:10836)
    at checkAndUpdateNodeInline (core.es5.js?de3d:12332)
    at checkAndUpdateNode (core.es5.js?de3d:12271)
    at debugCheckAndUpdateNode (core.es5.js?de3d:13132)
    at debugCheckDirectivesFn (core.es5.js?de3d:13073)
    at Object.eval [as updateDirectives] (BookingTimeComponent.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js?de3d:13058)
    at checkAndUpdateView (core.es5.js?de3d:12238)

Could someone point me on what I'm missing ? It feels like the ionRangeSlider plugin is not picked up by jQuery, but I have no idea how this should be done.

[nguyeda]

note that the jhipster project has its own webpack configuration files

[valekask]

I also have the same problem.

[songoo]

Same problem ;_)

[songoo]

Installation instructions are wrong.

This will work - npm install ion-rangeslider

[uberubert]

I'm having the same issue. Strangely, when I comment this line of code everything works perfectly. Line 13 from "node_modules\ng2-ion-range-slider\lib\ion-range-slider.component.js": // var jQuery = require("jquery");

I guess everything is loaded correctly and then the require retrieves something else.

[prajit21]

I'm having the same issue. Strangely, when I comment this line of code everything works perfectly. Line 13 from "node_modules\ng2-ion-range-slider\lib\ion-range-slider.component.js": // var jQuery = require("jquery");

I guess everything is loaded correctly and then the require retrieves something else.

any other way it will run ?

[valekask]

On ion-rangeslider first loading, it attaches ionRangeSlider function to global jQuery scope. As I understand, var jQuery = require("jquery"); defines local version of jQuery, that does not have ionRangeSlider. So when you remove local version of jQuery, your code use global one and plugin works correctly.

[nachocoig]

I think i found a solution.

The problem is that ion-rangeslider has been updated to version 2.3.0 and i think this version doesn't work fine with ng2-ion-range-slider.

However the package.json from "ng2-ion-range-slider" make that the new version 2.3.0 a correctly version.

"dependencies": { "@angular/core": ">=2.4.4", "@types/jquery": "^2.0.40", "ion-rangeslider": "^2.1.6" },

To avoid using version 2.3.0 from ion-rangeslider, you can put this in your package.json (your project package-json):

"ion-rangeslider": "2.2.0"

I hope help you.

[batcoder1]

If your project contains a different version of jQuery than the one specified in ionRangeSlider package.json dependencies and you're using yarn to install your project's dependencies and webpack to bundle the project, then this might be the source of the problem. Yarn will install node_modules even in ion-range-slider folder, which will cause that the webpack will build the project with your jQuery, as well as with the one in ion-range-slider/node_modules. Hence the jQuery versions clash. ionRangeSlider initiates with the first jQuery and your project's jQuery won't contain it.

It's kind of a fault of ionRangeSlider developer because he should not specify the jQuery in dependencies, but instead in peerDependencies.

[immotus]

I submitted a new pull request to make it compatible with the new release of ion-rangeslider 2.3.0 - #38