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.