Menu
I've seen a couple questions asked about this but none seem to have been solved. I'm trying to use noUiSlider to implement a sliding bar on my website. However it is not appearing at all. I can clearly see the when inspecting the page but otherwise it is like it isn't there.
Here's my code:
<script>
var slider = document.getElementById('slider');
//$slider.className = 'noUiSlider';
//$slider.id = 'slider-range';
noUiSlider.create(slider, {
start: 0,
range: {
'min': 0,
'max': 100
}
});
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
<link href="{{ url_for('static', filename='nouislider.css') }}">
</head>
<body>
<script src="{{ url_for('static', filename='nouislider.js') }}"></script>
<div id="slider"></div>
</body>
</html>Any advice or direction would be awesome. This is exactly how they have it on their website.
834
asked Sep 10 '25 15:09
I know this is an old question but I just had the same problem.
I think it's because the <div> target for the slider typically has no content, unless you specify formatting for the element, it's not visible.
Try including the default .css file provided with the control as a starting point and I think you'll see the slider appear.
198
answered Sep 13 '25 04:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With