Uncaught TypeError when trying to initialize jQRangeSlider cdn

I'm trying to add jQRangeSlider into my application because it's the only range slider plugin I've found that looks good and has a good variety of configurations. However, when I try to initialize it into my application I get this error.

Uncaught TypeError: $(...)[this._handleType(...)] is not a function
at t.<computed>.<computed>._createHandle (jQRangeSlider.min.js:1)
at t.<computed>.<computed>._createHandle (jquery-ui.min.js:6)
at t.<computed>.<computed>._createHandles (jQRangeSlider.min.js:1)
at t.<computed>.<computed>._createHandles (jquery-ui.min.js:6)
at t.<computed>.<computed>._createElements (jQRangeSlider.min.js:1)
at t.<computed>.<computed>._createElements (jquery-ui.min.js:6)
at t.<computed>.<computed>._create (jQRangeSlider.min.js:1)
at t.<computed>.<computed>._create (jquery-ui.min.js:6)
at t.<computed>.<computed>._createWidget (jquery-ui.min.js:6)
at new t.<computed>.<computed> (jquery-ui.min.js:6)

This is the cdn initialization. I'm using hanlebars as a rendering template if that makes any difference.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
        integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />  
   
    <link rel="stylesheet" href="/css/iThing.css">
    <style>
        html,
        body {
            height: 100%;
            overflow-x: hidden;
        }
    </style>
    <title>ECM forms</title>
</head>

<body style='background-color:#333f48;'>

    {{{body}}}
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
        integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSlider.min.js"
        integrity="sha512-Y4RFLBiYhluR30QeB+HKesyXEbEysHNQDjfPJNmOAy8kwDABixjgKi6vdNZ7W8FkSgmjH21k8EFcEB5WkEQ13A=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
        crossorigin="anonymous"></script>

    <script src="/js/dataCleaning.js"></script>
</body>

</html>

This is the html and jquery

<div id="slider"></div>

$(document).ready(() => {

    $("#slider").rangeSlider();
})

If anyone has any advice why this cdn wont work and knows how to fix it, it would be greatly appreciated! Thanks!

Uncaught TypeError when trying to initialize jQRangeSlider cdn

0 Answers