rangeslider.js jQuery deferred exception rangeslider is not a function in project but no issues with Codepen

Question

I am trying to add a Range-slider to my Django project using rangeslider.js. I created a working example in Codepen https://codepen.io/Slurpgoose/pen/GRRpmpX and everything seems to work fine.

When attempting to initiate the same slider on localhost I keep getting a jQuery deferred exception.

[Error] TypeError: undefined is not a function (near '...$('input[type="range"]').rangeslider...') (anonymous function) (jquery-3.3.1.js:3827)

Here I created an example including all of my imports. I have attempted to remove all the imports except for jQuery, and rangeslider and cleared my cache. Unfortunately this did not resolve my issue.

my script is called strategyBuilder.js

minimal example of my code.

$(document).ready(function(){
  console.log("loaded");
  $('.slider').rangeslider({
          polyfill: false,
          rangeClass: 'rangeslider',
          disabledClass: 'rangeslider--disabled',
          horizontalClass: 'rangeslider--horizontal',
          fillClass: 'rangeslider__fill',
          handleClass: 'rangeslider__handle',

          onInit: function() {

          },

          onSlide: function(position, value) {

          },

          onSlideEnd: function(position, value) {

          }
      })
})

.container {
  margin: 10%;
  height: 100%;
  width: 50%;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <script src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js" integrity="sha256-59/apVFrosMLFX2dHZLGvb3nPpu7e0Yx1rsDr1dTRrk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js" integrity="sha256-ZhpcIWx8GPtl1VEkyV22X7GHSzX1NCdp6BvbXMDHI/g=" crossorigin="anonymous"></script> 
  <script src="{% static 'js/strategyBuilder.js' %}" type="text/javascript"></script>
    
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" integrity="sha256-+bpMasWDxDlsVpNW3oZlL7L4RacwsP70u2fZt6Rxrmc=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" integrity="sha256-jJApoDvazb6sRGbc3gE+wdEAE0cE0H1Ag3k1qCada9c=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css">
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/strategyBuilder.css' %}">

<div class="container">
<input class="slider"
    type="range"
    min="1"                    // default 0
    max="100"                // default 100
    step="5"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="horizontal" // default horizontal
>
</div>

Answer 1

I was using Django template extend at the top of my html file. As a result I was importing all imports from a file called base.html containing header/footer etc...

I had also had jQuery included in that file. removing it fixed my issue

will leave my question up in case for some reason someone has this problem