javascript - 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 文件中创建 slider 容器。

<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 
  }); 
});