Meteor：如何在 Meteor 中初始化 noUiSlider？

Question

初始化的js代码很容易找到：

Template.templateOne.onRendered(function(){
  noUiSlider.create(document.getElementById('slider'), {
    connect: "lower",
    range: {
      min: 0,
      max: 100
    },
    start: 50
  });
});

谁能给我相应的html？我只尝试了一个带有 id='slider' 的 div，并尝试通过 Chrome 的检查功能从示例站点复制所有 div。都没有用:(

Answer 1

首先，您需要添加npm package。

meteor npm install --save nouislider

在 HTML 文件中创建滑块容器。

<template name="templateOne">
  <div id="slider"></div>
</template>

然后在模板的 onRendered 回调中对其进行初始化，并确保同时输入包。

import noUiSlider from 'nouislider';

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

Meteor：如何在 Meteor 中初始化 noUiSlider？

Meteor: How to initialize noUiSlider in Meteor?

html

javascript

meteor

nouislider