Meteor: How To Initialize Nouislider In Meteor?

The js code to initialize it is easy to find: Template.templateOne.onRendered(function(){ noUiSlider.create(document.getElementById('slider'), { connect: 'lower', range:

Solution 1:

First, you need to add the npm package.

meteor npm install --save nouislider

Create you slider container in your HTML file.

<templatename="templateOne"><divid="slider"></div></template>

Then initialize it in your template's onRendered callback and be sure to input the package as well.

import noUiSlider from'nouislider';

Template.templateOne.onRendered(function() {
   noUiSlider.create(this.$('#slider')[0], { 
     connect: "lower", 
     range: { min: 0, max: 100 }, 
     start: 50 
  }); 
});