简体   繁体   中英

Initialize a slider from external javascript slider

I use noUIslider and I try to initialize it from an external javascript file.

<div id="slider-med" class="slider-success"></div><input type="text" id="med-value" value="0"/>


$( document ).ready(function() {

$('#slider-med').noUiSlider({
  connect: 'lower',
  start: [ 4 ],
  step: 1,
  range: {
    'min': [  0 ],
    'max': [ 5 ]
  },
  format: wNumb({
    decimals: 0
  })
}); 
});

If I put the JS code in the end of the HTML file, it works. If I put it in an external JS file, it doesn't work. Since, I have a lot of sliders in the page, I want to keep it clear and have most of the JS code in external files.

Edit : this is the order of my scripts in the end of html code:

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/noUiSlider/jquery.nouislider.all.min.js"></script>
<script type="text/javascript" src="/static/js/materialize.min.js"></script>
<script type="text/javascript" src="/static/js/cookies.js"></script>

<script type="text/javascript" src="/static/js/custom.js"></script>

custom.js is the one with the sliders.

Use the following code inside <head> </head>

don't use outside

<script src="your_JS_full_path.js"></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM