Javascript 范围ui滑块

我在ios和android上查看range uislider时遇到问题 在meteor和cordova的一个应用程序中，在下面的视频中，我留下了一些细节。在浏览器中移动滑块可以工作，但在ios和安卓系统中，我无法可视化获得的范围。

我有以下代码： 尝试使用jquery，因为您可以看到代码被注释了，而我没有得到结果

Template.range.onRendered（函数（）{
$（函数（）{
$（“#滑块edad”）.noUiSlider({
开始：[18,30]，
步骤：1，
范围：{
"民":18,，
“最大”：60
}
});
});
$（函数（）{
$（“#范围”）.noUiSlider({
开始：[10]，
步骤：2，
范围：{
"min":10,，
“最大”：100
}
});
});
//km（）；
});
功能km（实例）{
//$（'.km范围'）.html（''）；
//会话集（“公里数”），“”；
var d1=$（'#range'）.val（）；
var d0r=parseInt（d1）；
控制台日志（'km:'，d0r）；
实例.km1.set（d0r）；
//会话设置（“公里”，d0r）；
//$（'.km范围'）.html（d0r，'km'）；
}
Template.range.events({
“单击#范围”：函数（事件、实例）{
console.log（'click'）；
km（实例）；
},
});经过长时间的聊天和多次尝试，结果是点击事件，使得noUiSlider无法在手机上工作

因此，检查并将其放入一些被动变量中，我们运行了以下代码：

import { Template } from 'meteor/templating';
import { ReactiveDict } from 'meteor/reactive-dict';

//import template html file

Template.findme.onCreated(function (){
    this.state = new ReactiveDict();

    // set start values
    this.state.set("km", 10);
    this.state.set("agemin", 18);
    this.state.set("agemax", 30);
});


Template.findme.onRendered(function() {

    if (!this._rendered) {
        this._rendered = true;


        // create slider
        $('#slider-edad').noUiSlider({
            start: [ 18, 30 ],
            step: 1,
            range: {
                'min': 18,
                'max': 60
            }
        })

        $('#range').noUiSlider({
            start: [ 10 ],
            step: 2,
            range: {
                'min': 10,
                'max': 100
            }
        });
    }

});

Template.findme.helpers({
    KilosM: function(){
        return Template.instance().state.get("km");
    },

    agemin: function(){
        return Template.instance().state.get("agemin");
    },

    agemax: function(){
        return Template.instance().state.get("agemax");
    },
});


Template.findme.events({
   'slide #slider-edad':function(event,instance) {
       var d2= $('#slider-edad').val()
       var d0 = parseInt(d2[0]);
       var d1 = parseInt(d2[1]);
       console.log(d0,d1);
       instance.state.set("agemin", d0);
       instance.state.set("agemax", d1);
   } ,

    'slide #range': function(event , instance) {
        var d1= $('#range').val();
        var d0r = parseInt(d1);
        console.log('Kilometros: ',d0r);
        instance.state.set("km", d0r);
    },
});

html模板是：

 <div class="">
    <span class="edad-range0">{{agemin}}</span>
    <span class="edad-title"> Age </span>
    <span class="edad-range1">{{agemax}}</span><br>
    <div id="slider-edad"></div><br><br>
  </div>


{{agemin}
年龄
{{agemax}}




您的代码段未运行，似乎不完整。另一件事是，为什么要在onRender方法中使用slider函数？建议是什么？我只是看到你的评论，但不建议这样做来执行或帮助解决问题。当你的示例失败而你不告诉我为什么要在onRender中添加代码时，我该如何帮助你？这一点很重要，因为在onRender中，您可以很容易地将事情搞糟。我只是想理解和再现你所做的事。：-）嘿，加载DOM时放入render方法进行初始化与使用documentReady相同，在onrendered中根本不起作用。狙击手不应该工作，因为它不完整，这是我的想法。正如你在chrome中看到的，当在ios或android中模拟时，反应部分根本不显示数据。让我们来看看。