Installed via NPM: Uncaught TypeError: $(...).ionRangeSlider is not a function

[JamesMcFall]

I've got a Laravel project. I've just installed jQuery and ion.rangeSlider through npm.

"ion-rangeslider": "^2.3.1",
"jquery": "^3.6.0"

JQuery works as expected in the project. Trying to do the most basic example of a slider (for example below), I get an error:

<input name="MyCoolField" class="form-control" type="text" />

<script>
$(function() {
    $("[name=MyCoolField]").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });
});
</script>

The Error Is:

jquery.js?8262:4059 Uncaught TypeError: $(...).ionRangeSlider is not a function
    at HTMLDocument.eval (_filter-form.js?a5ef:22:32)
    at mightThrow (jquery.js?8262:3766:1)
    at process (jquery.js?8262:3834:1)

[Soslan24]

same problem. I don't know how to solve it

[yonchando]

The same here.

[StenLeinasaar]

Assuming you included all the dependencies. Here is my approach in a separate js file that I included in my HTML file. It works for me.

"use strict";
var range_slider_custom = {
	init: function () {
			$("#my-slider").ionRangeSlider({
				type: "double",
				skin: "round",
				grid: false,
				min: 0,
				max: 5000,
				keyboard: true,
				hide_min_max: true,
				onChange: function (data) {
					var min = document.getElementById("min_price");
					var max = document.getElementById("max_price");
					min.setAttribute("placeholder", data.from);
					max.setAttribute("placeholder", data.to);
				},
			}),		
	},
};
(function ($) {
	"use strict";
	range_slider_custom.init();
})(jQuery);

I hope that is helpful. Make sure you include all js files in correct order and add them as type="module"

[andreidiaconescu]

this issue reproduces for me too: i upgraded to angular 15, and bootstrap 5, and i started getting this error: ...ERROR TypeError: this.$(...).ionRangeSlider is not a function

[Yaronberg]

I encountered a similar problem when I connected jQuery via CDN and imported it into a Vue project at the same time. I recommend checking all jQuery connections in the project.