Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create Doesn't Render

See original GitHub issue

I have installed both nouislider and @types/nouislider into my project using:

npm install --save-dev nouislider
npm install --save-dev @types/nouislider

I have a <div> at the top of my page for the noUiSlider

<div class="noUiSlider" id="slider"></div>

Since I’m using webpack I also added the following to plugins within the webpack.config.js file:

new webpack.ProvidePlugin({
     noUiSlider: 'nouislider'
})

Within the TypeScript file, I use the import

import * as noUiSlider from 'nouislider';

And within the $(document).ready(function() {} function, I create the noUiSlider with

var slider = document.getElementById('slider');

if (slider) {
    noUiSlider.create(slider, {
        start: [20, 80],
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
}

Nothing is displayed within the HTML, however when I inspect the element I get

<div id="slider" class="noUiSlider noUi-target noUi-ltr noUi-horizontal">
    <div class="noUi-base">
        <div class="noUi-connects">
            <div class="noUi-connect" style="transform: translate(20%, 0px) scale(0.6, 1);"></div>
        </div>
        <div class="noUi-origin" style="transform: translate(20%, 0px); z-index: 5;">
            <div class="noUi-handle noUi-handle-lower" data-handle="0" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="80.0" aria-valuenow="20.0" aria-valuetext="20.00"></div>
        </div>
        <div class="noUi-origin" style="transform: translate(80%, 0px); z-index: 4;">
            <div class="noUi-handle noUi-handle-upper" data-handle="1" tabindex="0" role="slider" aria-orientation="horizontal" aria-valuemin="20.0" aria-valuemax="100.0" aria-valuenow="80.0" aria-valuetext="80.00"></div>
        </div>
    </div>
</div>

What would be causing the element to not appear correctly?