流星JQuery和“滑块”功能

问题描述：

我想在我的流星应用程序中创建一个滑块，在步骤0.001之间0和1，我不想滑块有一个默认值，我不想显示句柄直到用户决定一个值。我对Meteor和一般网络开发很陌生，所以我复制了一些代码，并且一直在编辑它以适合我的上下文。流星JQuery和“滑块”功能

我的JS文件看起来像这样

Template.game_task.onCreated(()=>{ 
    if (!Session.get("sliderValue")){ 
     Session.setPersistent('sliderValue', -1) 
    } 

}); 

Template.game_task.onRendered(()=> { 

    /////// the slider stuff ////// 
    $("#slider").slider({ 
     min: 0, 
     max: 1, 
     step: 0.01, 
     slide: function(event, ui) { 
      $('#slider > .ui-slider-handle').show(); 
      Session.setPersistent('sliderValue',ui.value) 
     }, 
     change: function(event, ui) { 
      //save value to collection 
     } 
    }); 

    $('#slider > .ui-slider-handle').hide(); 


});

然后我的HTML文件

<template name="game_task"> 
    <div id="slider"></div> 
    <span id="min">0</span> 
    <span class="quarter">0.25</span> 
    <span class="quarter">0.5</span> 
    <span class="quarter">0.75</span> 
    <span id="max">1</span> 
    <input name="guess" id="guess" value="-1" hidden /> 
</template>

不过，我得到以下错误：

Exception from Tracker afterFlush function: 
meteor.js?hash=6d285d84547b3dad9717a7c89c664b61b45ea3d8:942 TypeError: $(...).slider is not a function 
    at Blaze.TemplateInstance.

看来，我不有.slider(..)的功能？虽然我的流星包中包含JQuery（默认情况下为它）。

滑块是jquery-ui的一部分，它没有与Meteor默认afaik打包在一起。你可以试试https://atmospherejs.com/mizzao/jquery-ui –

@MichelFloyd谢谢！这工作！但是这个滑块在下限处表现奇怪。当我进入0时，我会下降到0.01，然后我得到的值为空。所以我永远不能选择0 ..这不会发生在更高端。 – amaatouq

为什么不发表一个不同的问题。 –

答

滑块是jquery-ui的一部分，它并未默认使用Meteor打包afaik。你可以试试mizzao:jquery

流星JQuery和“滑块”功能

相关推荐