CODEWITHSUNDEEP
javascriptuser-interfacefrontend
Scragglez
Scragglez

Reputation: 143

noUiSlider not appearing

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.

Upvotes: 4

Views: 2829

Answers (2)

mifydnu
mifydnu

Reputation: 113

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.

Upvotes: 2

Scragglez
Scragglez

Reputation: 143

I was able to fix this by making sure to specify a size in the css style when creating the slider div.

Upvotes: 1

Related Questions