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: {
      min: 0,
      max: 100
    },
    start: 50
  });
});

Could someone just give me the corresponding html? I tried just a div with id='slider' and I tried copying all the divs from the example sites via Chrome's inspect function. Neither worked :(

回答1:

First, you need to add the npm package.

meteor npm install --save nouislider

Create you slider container in your HTML file.

<template name="templateOne">
  <div id="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 
  }); 
});

来源：https://stackoverflow.com/questions/42593154/meteor-how-to-initialize-nouislider-in-meteor