Nouislider slider not showing up in the webpack project
Simply trying to add a slider and be able to just call it and do custom config for a situation, i don't see any errors popping up not sure what am i doing wrong. Slider class is in another .js file made only for it.
js script for the slider
rangeSlider.js
import * as noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';
export default class RangeSlider {
constructor(selector = "[data-js-rangeSlider]", config = { start: [ 0, 100 ], range: { min: 0, max: 100 } }) {
this.node = document.querySelector(selector);
if(this.node) {
this.slider = new noUiSlider.create(this.node, config);
}
}
}
webpack entry file index.js
import RangeSlider from "./js/rangeSlider.js";
const rangeSL = new RangeSlider(document.getElementById("rangeSlider"),{ start: [ 0, 100 ], range: { min: 0, max: 100 } });
html file where everything called
index.html
<body>
<h1>
Slider Test
</h1>
<div class="rangeSlider rangeSlider--isDark" data-js-rangeSlider>
<div class="rangeSlider__inner"></div>
</div>
</body>